Vue CLI3

Vue CLI3

• vue-cli 3 与 2 版本
  • vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
  • vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录
  • vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化
  • 移除了static文件夹，新增了public文件夹，并且index.html移动到public中

Vue CLI3初始化项目

1. vue create my-project
   • 初始化命令，据你用的文件名创建一个文件夹，存放之后项目的内容
   • 该名称也会作为默认的项目名称，但是不能包含大写字母等

? Target directory C:\Users\Desktop\Note\my-project already exists. Pick an action: (Use arrow keys)
> Overwrite 覆盖
  Merge 合并
  Cancel 取消

• 选择配置方式
  • Overwrite 覆盖
  • Merge 合并
  • Cancel 取消

? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features

• 请选择预设配置
  • default (babel, eslint)默认配置
  • Manually select features手动选择特性

4. 选择手动配置后，空格选中或取消

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

• Babel支持es6语法转换（常用）
• TypeScript微软提供的js超集
• Progressive Web App (PWA) Support渐进式的网页应用程序
• Router路由
• Vuex状态管理模式+库
• CSS Pre-processorsCSS预处理器
• Linter / FormatterES6Lint检测代码规范
• Unit Testing支持单元测试
• E2E Testinge2e测试(end to end)

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

• 对应的配置是单独生成文件还是放在package.json

6. ? Save this as a preset for future projects? (y/N)

• 要不要帮刚才的配置保存起来

7. ? Save preset as: mypreset

• 设置保存的名称

目录结构详解

• node_modules是依赖的node工具包目录
• public文件夹相当于脚手架2的static目录
• src文件夹是源代码
• .browserslistrc文件时游览器相关支持情况
• .gitignore文件是Git上传需要忽略的文件
• babel.config.js是ES语法转换
• package.json是项目描述文件
• README.md是项目文档

UI方面的配置

• 启动配置服务器vue ui
• 可以在里面管理项目