创建一个 Vue3项目

1. 检查当前node版本

1.1 查看当前版本

使用 nvm ls 或者 node -v检查当前node版本，官方推荐18.3或者更高的版本。

推荐安装nvm，便于随时切换node版本。可以看到我当前电脑的node版本为22.17.1，符合需求。

1.2 下载合适的node版本

但是为了照顾低版本的项目，让我们将node切换到低版本进行代码测试。看看会发生什么。

使用 nvm ls available 检查当前已有的node版本

可以看到，列表中出现了4列：
（1） CURRENT：更新频繁，包含新功能但可能存在兼容性问题；
（2）LTS：提供长期支持（通常30个月），包含安全更新和关键bug修复，适合生产环境；
（3）OLD STABLE：老旧的稳定版本；
（4）OLD UNSTABLE：老旧的不稳定版本。

通常来说，推荐使用LTS，但是目前的稳定版本为V20.10.0，不是我们想要测试的版本，因此可以按住ctrl键，点击右下角的版本链接https://nodejs.org/en/about/previous-releases

可以看到，目前18版本中最稳定的就是v18.20.8。我们可以通过命令

nvm install 18

或者

nvm install 18.20.8

进行下载。

1.3 切换到合适的node版本

使用 nvm use 18 即可切换到本地node最新的18版本

当然如果是在已有的项目中，最好使用 nvm use [version] 切换到确切的合适版本。

2. 创建一个 Vue3 项目

2.1 使用最新的node18版本创建（有问题）

（1）创建项目

使用vscode打开某个文件夹，使用以下命令进行vue3项目的创建：

npm create vue@latest

根据提示，输入项目名称，选择要包含的功能、实验特性和是否创建一个空的Vue项目。建议初学者按照上图中的选项进行即可。

（2）运行项目
根据提示，依次运行3个命令：

cd vue3-app
npm install
npm run dev

可以看到，因为vue3项目通过 Vite 创建，而 Vite 需要的node版本为 20.19+ 或者 22.12+，因此我们最好切换为当前最新的LTS版本，才能运行项目。

2.2 使用最新LTS的node版本创建vue3项目（没问题）

（1）node切换到最新的LTS版本

使用nvm use 22 切换到最新版本，如果和官网上的LTS最新版本不一致，可以先通过 nvm install 22 进行下载后再切换。

（2）创建运行项目
按照 2.1 的相同方式创建运行项目，项目运行后，点击链接打开

3. 了解项目结构

• .vscode：这个文件夹通常包含了 Visual Studio Code 的配置文件，用来设置代码格式化、主题样式等。
• node_modules：这个文件夹内包含项目所需的所有 node 包。当运行 npm install 或 yarn 时，所有在 package.json 中列出的依赖都会被安装到这个文件夹下。
• public：用来存放静态资源的文件夹，这部分静态资源是不会经过构建工具处理的。例如 favicon 图标文件。
• src：源码文件夹，我们的开发工作主要就是在这个目录下面。通常包括 Vue 组件、JavaScript 文件、样式文件等。
  • assets：这个同样是静态资源目录，放在该目录下的静态资源在打包的时候会被构建工具处理；
  • components：组件目录，存放各种功能组件；
  • router文件夹：存放路由文件；
  • views文件夹：存放视图文件；
  • App.vue：根组件；
  • main.js：入口 JS 文件。
• .eslintrc.cjs：ESLint 的配置文件，用于检查代码错误和风格问题，cjs 是 CommonJS 的配置文件格式。
• .gitignore：Git 的配置文件，用于设置不需要加入版本控制的文件或文件夹。
• .prettierrc.json：Prettier 的配置文件，Prettier 是一个代码格式化工具。
• index.html：项目的入口 HTML 文件，Vite 将利用它来处理应用的加载。
• jsconfig.json：JavaScript 的配置文件，用于告诉 VS Code 如何处理 JavaScript 代码，例如设置路径别名。
• package-lock.json：锁定安装时的包的版本，确保其他人在 npm install 时，大家的依赖能保持一致。
• package.json：定义了项目所需的各种模块以及项目的配置信息（例如项目的名称、版本、许可证等）。
• README.md：项目的说明文件，通常包含项目介绍、使用方法、贡献指南等。
• vite.config.js：Vite 的配置文件，用于定制 Vite 的构建和开发服务等。

4. VSCode 插件推荐

• Vue VSCode Snippets：可以快速生成 Vue 代码的模板

• Vue（Official）

  • 在 Vue2 时间，大家接触更多的是 Vetur，该插件主要是对 Vue 单文件组件提供高亮，语法支持和检测功能。
  • 后面随着 Vue3 版本的发布，Vue 官方团队推荐使用 Volar 插件，该插件覆盖了 Vetur 所有的功能，并且支持 Vue3 版本，还支持 TS 的语法检测。
  • 但是现在，无论是 Vetur、Volar、TypeScript Vue Plugin 已经成为历史了，目前官方推出了 Vue-Official，这个最新的插件将前面插件的所有功能都涵盖了。

  
  

5. Vite

官网地址：https://vitejs.dev/，官方推荐的构建工具，显著提升开发体验。

Vite 之所以能够提升开发体验，是因为它的工作原理和 Webpack 完全不同。Vite 根本就不打包，而是通过请求本地服务器的方式来获取文件。

常用的配置如下：

1. base：用于设置项目的基础路径。这对于部署到非根目录的项目特别有用。
2. server：配置开发服务器的选项，例如
   • 端口（port）
   • 自动打开浏览器（open）
   • 跨源资源共享（cors）
   • 代理配置（proxy）
   • …
3. build：包含构建过程的配置，例如
   • 输出目录（outDir）
   • 生产环境源码地图（sourcemap）
   • 压缩（minify）
   • 分块策略（rollupOptions）
   • …
4. css：用于配置 CSS 相关选项，如预处理器配置、模块化支持等。
5. esbuild：可以自定义 ESBuild 的配置，例如指定 JSX 的工厂函数和片段。
6. optimizeDeps：用于预构建依赖管理，可以指定需要预构建的依赖，以加速冷启动时间。
7. define：允许你定义在源码中全局可用的常量替换。
8. publicDir：设置公共静态资源目录，默认为 public。

---

下一章 《Vue3 模板语法》