Vue CLI 脚手架创建项目流程详解（2）

更新 CLI 脚手架

确保你安装的是最新版本的 Vue CLI，以支持最新的特性及改进。你可以通过以下命令全局安装或更新 Vue CLI：

shell 复制代码

npm install -g @vue/cli

创建 Vue 3.x 项目

启动创建向导

使用 vue create 命令来开始创建一个新的 Vue 项目：
shell 复制代码
```
vue create vue-project
```
选择手动配置

由于要使用 TypeScript ，所以需要选择最后一个选项来进行自定义搭配，通过键盘的上下箭头进行切换选择：
选择特性

根据提示选择你想要包含的功能，如 Babel、TypeScript、Router 等等。对于一个完整的 Vue 3 + TypeScript 项目，你可能希望选中以下选项：
- Babel
- TypeScript
- Router
- CSS Pre-processors
- Linter / Formatter
Vue 版本选择

选择要使用的 Vue.js 版本。由于我们创建的是 Vue 3 项目，请选择 3.x。
Class 组件语法

对于 Vue 3，推荐使用 Composition API 而不是 Class 语法，因此这里选择 n。
Babel 和 TypeScript 的搭配

如果你需要支持现代模式和 JSX，则应选择 y 来启用 Babel。
路由模式

对于生产环境中的历史记录模式（history mode），如果服务器端已经正确设置以处理所有路径回退到 index.html，则可以选择 y。否则，如果你不打算立即部署或不确定服务器配置，可以选择哈希模式（hash mode）n。
CSS 预处理器

选择你喜欢的 CSS 预处理器。Sass/SCSS 是一个流行的选择，并且与许多 UI 库兼容。
Lint 规则

选择合适的 ESLint 配置，比如 ESLint + Prettier 是一种常见的组合，它不仅提供代码风格检查还提供了自动格式化功能。
Lint 检查时机

决定是否在保存文件时进行 Lint 检查或仅在提交代码时检查。这里通常选择 Lint on save。
配置文件位置

选择将配置存储在单独的文件中还是合并到 package.json 中。独立文件更易于管理和共享。
保存为预设

为了未来更快地创建类似项目，可以将当前配置保存为一个预设。

解决 history 模式下的 404 问题

当使用 Vue Router 的 history 模式时，直接访问子路径可能会导致 404 错误。解决方法取决于你的部署环境：

开发阶段 ：可以通过配置 Webpack Dev Server 的 historyApiFallback 选项来避免这个问题。
javascript 复制代码
```
devServer: {
  historyApiFallback: true,
}
```
测试或本地打包后预览 ：使用 serve 工具并加上 -s 参数来重定向所有未找到的请求至 index.html。
json 复制代码
```
"scripts": {
  "preview": "serve ./dist -l 4000 -s",
}
```
线上环境 (Node.js) ：安装适当的中间件如 connect-history-api-fallback。
线上环境 (Nginx) ：调整 Nginx 配置以确保所有未知路径都指向 index.html。
nginx 复制代码
```
location / {
  try_files $uri $uri/ /index.html;
}
```

打印 Webpack 配置

如果你想查看 Vue CLI 底层生成的 Webpack 配置，可以运行如下命令将其输出到指定文件：

shell 复制代码

npx vue-cli-service inspect > config/webpack.config.js

这可以帮助你理解构建过程中的配置细节，尤其是在遇到构建相关的问题时非常有用。

总结

通过上述步骤，你应该能够顺利创建并配置一个基于 Vue 3 和 TypeScript 的新项目。每个步骤都旨在帮助你根据项目的具体需求定制最合适的开发环境。

Vue CLI 脚手架创建项目流程详解 （2）

更新 CLI 脚手架

创建 Vue 3.x 项目

解决 history 模式下的 404 问题

打印 Webpack 配置

总结

Vue CLI 脚手架创建项目流程详解（2）