要是用pnpm就换成

Vue3从零创建项目最省心的完整流程？踩过哪些常见坑？

最近帮身边刚转前端的朋友调了好几个Vue3项目启动不了的问题,不是用错了构建工具版本，就是路径别名配错了半天找不到文件，还有人连组合式API怎么搭架子都懵，干脆把最近整理的完整步骤、还有新手最容易踩的雷都揉成一篇实打实用的问答，看完别再说不会创建Vue3项目了。

新手先选哪种构建工具？

现在主流的Vue3官方推荐的有两个,vite和vue-cli？不对，官方最新的Vue3教程已经把Vue CLI标记为“维护模式”的脚手架”了？对，现在做新项目优先选Vite，原因很简单：启动快、热更新丝滑，完全没有等待的感觉，写两行代码就能启动个开发服务器都不用等进度条跳半天，组合式API的体验也更贴合，朋友一开始用的老版本Vue CLI，后来换成Vite连说“打开了新世界大门”，不过也不是说Vue CLI完全不能用，如果是要兼容老项目的插件或者对Webpack配置有非常特殊的要求，才考虑选它，今天咱们就只讲官方主推的Vite创建Vue3项目的方法。

用Vite创建项目前要做什么准备？

很多朋友一上来就敲npm create vite@latest，结果要么npm版本太低报错，要么电脑里连Node.js都没装，白忙活半天，准备工作其实就两步，很简单：

第一步：检查和安装Node.js，先打开电脑上的命令行工具（Windows就是cmd或者PowerShell，Mac和Linux用终端），输入node -v，要是显示v18或者更高的版本就没问题，要是低于v16或者干脆提示没有这个命令，就去官网下载最新的LTS长期支持版本，下载安装包的时候别选测试版，直接一路下一步就行，安装完重启一下命令行再检查一遍版本，版本对了再继续。

第二步：选个顺手的包管理器，Node.js自带npm，但很多人觉得npm下载依赖慢，那可以换成国内镜像源，比如淘宝镜像，不过现在淘宝镜像源换了个新地址，要记得更新一下：npm config set registry https://registry.npmmirror.com，另外还有pnpm和yarn，这两个比npm更省磁盘空间，下载速度也更快，pnpm现在官方和社区都比较推，新手也可以学一下怎么装：npm install -g pnpm，装完用pnpm -v检查一下，不过今天的教程两种包管理器都可以用，选自己习惯的就行。

怎么用Vite快速创建一个Vue3项目？

敲两行代码就能搞定,全程大概两三分钟，看你下载依赖的速度：

第一行：初始化项目。

npm create vite@latest my-vue3-project -- --template vuepnpm create vite@latest my-vue3-project --template vue
# 要是用yarn就换成：
yarn create vite my-vue3-project --template vue

这里注意一下,my-vue3-project是你的项目名称，你可以随便改，比如改成shopping-cart-vue3或者my-blog-vue3，别用中文、空格、大写字母开头就行，不然可能会报错。--template vue后面的vue是模板类型，除了普通的vue模板，还有vue-ts（TypeScript模板，现在很多公司要求用TypeScript，新手如果愿意学的话可以直接选这个，后面踩坑部分我也会提TypeScript的几个基础配置）、vue-ts-cjs（CommonJS模块的TypeScript模板，用得比较少），新手就先选普通的vue模板练手吧。

敲完第一行代码之后,命令行会问你几个问题？不对不对，现在最新版的Vite用带--template的参数就不会问问题了，直接生成文件夹和文件，要是不带的话就会一步步问你项目名称、框架、变体，新手可以先试试不带的，但带参数更省心。

第二行：安装依赖并启动开发服务器。 先cd到你刚才创建的项目文件夹里：

cd my-vue3-project

然后安装依赖：

npm install
# 或者pnpm install
# 或者yarn install

装完依赖之后,启动开发服务器：

npm run dev
# 或者pnpm dev
# 或者yarn dev

启动之后,命令行会显示一个地址，一般是http://localhost:5173/，你复制这个地址到浏览器里打开，就能看到Vite官方给的Vue3欢迎页面了，页面上会有几个按钮，点一下会变颜色，还有组合式API的示例，新手可以先看看那个示例文件src/App.vue和src/components/HelloWorld.vue。

创建完项目还要做哪些基础配置？

欢迎页面只是个开始,做实际项目的时候肯定要改一改，加一些基础配置，不然开发起来会很麻烦，比如配置路径别名、配置自动打开浏览器、配置eslint和prettier（代码格式化和检查工具，让代码写得更规范，多人协作的时候很重要）、配置css预处理器（比如Less或者Sass，不用自己写复杂的原生CSS，变量、嵌套、混合都能用）。

配置路径别名和自动打开浏览器

路径别名是什么？就是不用每次导入组件或者文件的时候都写../../../../../src/components/HelloWorld.vue这种长路径，直接写@/components/HelloWorld.vue就行，@就代表src文件夹，新手很容易漏这个配置，后面找文件找半天，自动打开浏览器就是不用每次手动复制粘贴地址到浏览器，启动开发服务器的时候就自动弹出来。

这两个配置都要改项目根目录下的vite.config.js文件，打开这个文件，你会看到默认的代码是这样的：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
})

把它改成这样：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  server: {
    open: true, // 自动打开浏览器
    port: 3000, // 可以改成你喜欢的端口号，比如3000
  },

要是你刚才选的是普通Vue模板（vue-ts）的话，还要改一下tsconfig.json文件里的paths配置，不然TypeScript会报错说找不到@/开头的文件，tsconfig.json在项目根目录下也有，打开它，找到compilerOptions下面的baseUrl和paths，要是没有的话就自己加上：

{
  "compilerOptions": {
    // ...其他配置
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

这样TypeScript就能识别@/开头的路径了。

配置自动打开浏览器的话,要是你刚才选的是vue-ts-cjs模板，就不用改了，刚才的vite.config.js里已经配置过了。