关于 Vue 脚手架

目录导读：
1\ Vue 脚手架的基本用法
2\ Vue 脚手架生成的项目结构分析
3\ Vue 脚手架的自定义配置

1\ Vue 脚手架的基本用法

Vue 脚手架用于快速搭建 Vue 项目基础架构，官网地址：https://cli.vuejs.org/zh/

使用步骤

基于 3.x 版本的脚手架创建 Vue 项目
1- 全局安装 3.x 版本的 Vue（通过 win + R --> cmd 打开控制台）

// 运行
npm install -g @vue/cli

2- 通过 交互式命令行 方式，创建 新版 Vue 项目

// 在需要创建项目的文件下，运行
vue create my-project

以下是一个示例创建过程，具体需要安装哪些模块依具体项目而定

第一步：可以使用之前创建好的模板，也可以重新自己创建安装，这里选择了 manually select features 表示自己创建。回车后到达第二步，如下图选择自己需要安装的模块。
选择操作：通过上下箭头选择 --> 空格键表示选中，该选中项前面会出现 * --> 选好后，回车安装。

第二步，是否安装历史模式路由（目前都是 hash 模式路由），在这里选择 n，回车。

第三步，选择 Eslint 语法版本，选择标准语法，回车。

第四步，什么时候进行 Eslint 语法校验

第五步，所需要的模块需要放置的位置，选择 ‘在专用的配置文件中’，使 package.json 文件结构清晰，不紊乱。

第六步，是否把此项目配置设置为一个模板，后续可以直接使用。

第七步，进入项目的创建过程，自动下载一些模块、依赖包等

第八步，按要求执行两个命令行，打开浏览器，成功。

或者通过 图形化界面 方式，创建 新版 Vue 项目

// 在需要创建项目的文件下，运行
vue ui

创建成功后运行

基于 2.x 版本的脚手架创建 Vue 项目
1- 全局安装 2.x 版本的 Vue（通过 win + R --> cmd 打开控制台）

// 首先要卸载之前已经安装的 vue-cli 版本，运行
npm uninstall -g vue-cli
// 然后安装
npm install -g @vue/cli-init

2- 运行命令，创建 旧版 Vue 项目

vue init webpack my-project

小结：目前比较流行的是基于 3.x 版本的，因为它可以兼容 2.x 版本的，但具体使用哪种视具体项目情况而定

2\ Vue 脚手架生成的项目结构分析

创建后的项目目录结构图

以下目录表中在实际项目中有的可能是不存在的，在此只做目录参考：

总目录	名称
node_modules	依赖包目录
pulic	静态资源目录（一般放图片类资源）
src	页面及业务逻辑目录
.browserslistrc	指定项目的目标浏览器的范围
.editorconfig	代码规范配置文件
.eslintrc.js	ES语法检查配置
.gitignore	git 上传需要忽略的文件配置
babel.config.js	Babel 配置文件
.babelrc	Babel编译参数，es6 转 es5
.postcssrc.js	转换 css 的工具，用 js 来处理 css
.editorconfig	代码格式
package.json	项目基本信息（项目名称/开发依赖/版本等）
package-lock.json	项目基本信息，同上
README.md	项目说明

分目录-src	名称
assets	静态资源
components	公共组件
views	组件源码
app.vue	根组件
main.js	入口文件
router.js	路由，配置项目相关路由

3\ Vue 脚手架的自定义配置

此处示例的配置功能是：修改端口号、在运行项目时直接在浏览器中打开页面

1- 通过 package.json 配置项目

// 必须是符合规范的 json 语法
"vue":{
    "devServer":{
      "port": "8888",
      "open": true
    }
}

/*
* 注意：不推荐使用这种配置的方式，因为 package.json 主要
* 用来管理包的配置信息，为了维护方便，推荐将 vue 脚手架的
* 相关配置单独定义到 vue.config.js 配置文件中
*/

2- 通过单独的配置文件配置项目

• 在项目的根目录创建 vue.config.js
• 在该文件中进行相关配置，从而覆盖默认配置
• 配置项参考：https://cli.vuejs.org/zh/config/#vue-config-js

module.exports = {
    devServer: {
        port: 8888,
        open: true
    }
}

小结：两种方式的配置只能二选一，不要同时设置