vue create app
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，它可以帮助我们快速创建一个 Vue.js 项目，并且提供了一些工具和插件，用于开发、测试、部署等方面的工作。
在 Vue CLI 版本 3.0 之前，我们需要先全局安装 Vue CLI，然后使用命令行创建一个新的 Vue.js 项目。但是，从 Vue CLI 3.0 开始，我们可以直接使用 `vue create` 命令来创建一个新的 Vue.js 项目。下面将介绍 `vue create` 命令的原理和详细介绍。
## 命令行参数
在使用 `vue create` 命令时，我们可以在命令行中添加一些参数来定制我们的项目。常用的命令行参数如下：
- `--preset`：使用预设的配置项来创建项目；
- `--default`：使用默认的配置项来创建项目；
- `--packageManager`：指定包管理器，可以是 npm 或 yarn；
- `--registry`：指定包管理器的 registry 地址；
- `--force`：强制覆盖已经存在的项目；
- `--inlinePreset`：使用内联的预设配置项来创建项目；
- `--clone`：从一个 Git 仓库中克隆项目。
## 命令行流程
当我们执行 `vue create` 命令时，Vue CLI 会按照以下流程来创建一个新的 Vue.js 项目：
1. 首先，Vue CLI 会询问我们是否要使用预设配置项来创建项目，如果我们选择了使用预设配置项，则会列出所有可用的预设配置项供我们选择。如果我们选择了使用默认配置项，则会直接进入下一步；
2. 接下来，Vue CLI 会询问我们要使用哪种包管理器，可以是 npm 或 yarn；
3. 然后，Vue CLI 会询问我们是否要将包管理器的 registry 地址设置为淘宝镜像，以加快包的下载速度；
4. 接下来，Vue CLI 会询问我们要在项目中安装哪些功能模块，例如 Babel、TypeScript、CSS 预处理器等等；
5. 然后，Vue CLI 会根据我们选择的功能模块，生成一个配置文件 `vue.config.js`，该文件用于配置 Vue CLI 的内部插件和 webpack 配置；
6. 最后，Vue CLI 会使用命令行工具创建一个新的 Vue.js 项目，并在项目中安装我们选择的功能模块。
## 配置文件
在使用 `vue create` 命令创建一个新的 Vue.js 项目时，Vue CLI 会根据我们选择的功能模块，自动生成一个配置文件 `vue.config.js`。该文件用于配置 Vue CLI 的内部插件和 webpack 配置。下面是一个简单的 `vue.config.js` 配置文件示例：
```javascript
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `@import "@/styles/variables.scss";`
}
}
},
devServer: {
port: 8080
}
}
```
在上面的配置文件中，我们可以看到 `css` 和 `devServer` 两个配置项。其中，`css` 用于配置 CSS 预处理器的 loader 选项，`devServer` 用于配置开发服务器的端口号。我们还可以在该文件中添加其他的配置项，例如：
- `chainWebpack`：用于配置 webpack 的链式操作；
- `configureWebpack`：用于配置 webpack 的普通配置项；
- `pluginOptions`：用于配置 Vue CLI 的插件选项等等。
## 总结
`vue create` 命令是 Vue CLI 中非常重要的一个命令，它可以帮助我们快速创建一个新的 Vue.js 项目，并且提供了一些工具和插件，用于开发、测试、部署等方面的工作。在使用 `vue create` 命令时，我们可以通过添加命令行参数来定制我们的项目，并且可以根据自己的需求，自定义配置文件 `vue.config.js` 来配置 Vue CLI 的内部插件和 webpack 配置。
相关文章
