Time: 2024-12-22 Sunday 02:08:02
Author: Jackasher

Vue3

创建 Vite 项目

方法一：使用 npm

1. 打开终端，导航到你希望创建项目的目录。

2. 运行以下命令来创建一个新的 Vite 项目：

   npm create vite@latest

   运行后，系统会提示你输入项目名称，例如 my-vite-project。

3. 选择框架：接下来，Vite 会让你选择一个前端框架。常见选项包括：

   • React
   • Vue
   • Svelte
   • Vanilla
   • 以及其他选项

   使用箭头键选择你需要的框架，然后按回车确认。

4. 选择变体（如果适用）：某些框架会提供不同的模板变体，例如 TypeScript 版本或 JavaScript 版本。选择你需要的变体。

5. 进入项目目录并安装依赖：

   cd my-vite-project
   npm install

方法二：使用 Yarn

如果你更喜欢使用 Yarn 作为包管理器，可以按照以下步骤操作：

1. 运行创建命令：

   yarn create vite

2. 后续步骤与方法一类似，按照提示选择项目名称、框架和变体。

3. 安装依赖：

   cd my-vite-project
   yarn

方法三：使用 pnpm

对于喜欢使用 pnpm 的用户：

1. 运行创建命令：

   pnpm create vite

2. 后续步骤与前两种方法类似。

3. 安装依赖：

   cd my-vite-project
   pnpm install

启动开发服务器

项目创建并安装依赖后，可以启动开发服务器进行开发：

npm run dev

或者如果使用 Yarn：

yarn dev

或者使用 pnpm：

pnpm dev

运行后，终端会显示本地开发服务器的地址，通常是 http://localhost:5173。打开浏览器访问该地址，即可看到你的 Vite 项目正在运行。

构建生产版本

当你完成开发并准备发布项目时，可以使用以下命令来构建生产版本：

npm run build

构建完成后，生成的文件会放在 dist 目录下。你可以将这些文件部署到你的服务器或静态托管服务（如 Vercel、Netlify 等）上。

常用命令

• 启动开发服务器：

  npm run dev

• 构建生产版本：

  npm run build

• 预览生产版本：

  npm run preview

配置 Vite

Vite 使用 vite.config.js 或 vite.config.ts 作为配置文件。你可以在项目根目录找到该文件并根据需要进行自定义配置。例如，配置别名、插件、代理等。

示例 vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src',
    },
  },
  server: {
    proxy: {
      '/api': 'http://localhost:3000',
    },
  },
})

常见问题与解决方案

1. 依赖安装失败：

   • 确保你的网络连接正常，尝试切换网络或使用国内镜像源（如淘宝镜像）。

   • 删除 node_modules 和 package-lock.json（或 yarn.lock、pnpm-lock.yaml）后重新安装依赖。

     rm -rf node_modules
     rm package-lock.json  # 或 yarn.lock / pnpm-lock.yaml
     npm install

2. 端口被占用：

   如果默认端口被占用，可以在 vite.config.js 中修改 server.port 配置，或在启动命令中指定端口：

   npm run dev -- --port 3000

3. 热更新不生效：

   • 确保你的代码没有语法错误。
   • 检查浏览器是否禁用了 JavaScript 或有插件干扰。

计算属性

计算属性是有缓存的，但是方法是没有缓存的

Prop

通过defineProps来得到props的值，

路由

奇怪了，明明easy-font项目是使用useRouter来获取router，但这里是引入routerView和routerLInk

Emit

原本通过this.$emit触发的变成了，引入mitt（），这个还需要额外安装，这对初学来说非常不友好啊

父组件 v-model 在组件标签上使用

在父组件 Father.vue 中，你使用了 v-model 来绑定数据：

<AtguiguInput v-model="username" />

• v-model 是 Vue 的一个语法糖，它的作用是将 父组件的数据 和 子组件的数据变化 进行双向绑定。
• 当你写 v-model="username" 时，Vue 会将其等价于：

:modelValue="username" @update:modelValue="username = $event"

前端混乱的体现

因为是弱类型，编译器根本不知，对象根本不知道有哪些属性，也没有约束

插槽

插槽是为了解决，组件部分结构不同的情况，例如一个组件一个部分，有的需要图片有的需要列表，那怎么处理，就把结构塞进组件里面，可以使用Template然后放 v-slot命名插槽