1 Vue 脚手架的基本用法

• Vue脚手架：命令行工具，用于快速生成Vue项目基础架构，简化程序员创建Vue项目的过程。
• 安装： npm install -g @vue/cli
• 1 基于交互式命令行的方式，创建新版vue项目：vue create my-project
• 2 基于图形化界面的方式，创建新版vue项目：vue ui，选择如下，其余默认

详情：1 项目名称，2 git提交信息
预设：手动
功能：Babel，Router，Linter/Formatter，使用配置文件
配置：ESLint+Standard config
创建项目：保存为新预设

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

vue脚手架生成的项目结构分析.png

- 文件夹
node_modules：依赖包
public：静态资源文件（例如：首页，图标）
src：源代码（在此写代码）
 assets：资源（例如：样式表，图片）
 components：组件
 views：视图组件
 App.vue：根组件 
 main.js：打包入口文件（new了一个Vue的实例对象，挂载路由，通过render将根组件渲染到首页，通过`$mount('#app')`方法挂载vue实例到对应的区域中）
 router.js：路由相关的配置

- 文件（一些其他的配置文件）
.eslintrc.js：eslint语法相关的配置文件
.gitignore
.babel.config.js
package.json：包管理配置文件
postcss.config.js：（配置前缀等）

3 vue脚手架自定义配置（两种）（二选一）

• 1 通过 package.json 配置项目(不推荐)

// 必须符合规范的json语法，不要写注释
"vue": {
  "devServer": {
    "port": "3000",
    "open": true
  }
}

• 2 通过单独的vue.config.js配置文件配置项目（推荐，方便维护）
  在项目根目录创建文件 vue.config.js
  在该文件中进行相关配置，从而覆盖默认配置

// vue.config.js
module.exports = {
  devServer: {
    open: true, //自动打开浏览器
    port: 3000   //配置端口号
 }
}