vue-cli 搭建vue项目

1.什么是Vue-CLI(Command Line Interface)?

Vue-CLI是vue官方提供的脚手架工具,
默认已经帮我们搭建好了一套利用webpack管理vue的项目结构

2如何安装Vue-cli和使用Vue-CLI?

安装脚手架工具:

npm install -g @vue/cli

检查是否安装成功:

vue --version

通过脚手架创建项目:

vue create project-name

创建项目选择:

Vue CLI v4.5.9
? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint)  (默认使用vue 2.x配置)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint) （默认使用vue 3.x配置） 
  Manually select features （手动选择要使用的配置，一般使用手动配置） 

使用手动选择模式：

Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press  to select,  to t
oggle all,  to invert selection)
❯◉ Choose Vue version （选择Vue2  还是Vue3）
 ◉ Babel （把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5，让低端运行环境(如浏览器和 node )能够认识并执行）
 ◯ TypeScript （TypeScript 是 JavaScript 的一个超集）
 ◯ Progressive Web App (PWA) Support（渐进式WEB应用）
 ◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors （sass less css预编译）
 ◉ Linter / Formatter（代码自动检测工具）
 ◯ Unit Testing （vue 单元测试）
 ◯ E2E Testing （自动化测试）

相关参考文档（如有侵权，联系删除）
Babel
TypeScript
Progressive Web App (PWA) Support
Linter / Formatter
Unit Testing
E2E Testing

vue脚手架创建项目时的 linter / formatter 配置选择

ESLint with error prevention only 
只配置使用 ESLint 官网的推荐规则

ESLint + Airbnb config
使用 ESLint 官网推荐的规则 + Airbnb 第三方的配置

ESLint + Standard config
使用 ESLint 官网推荐的规则 + Standard 第三方的配置

ESLint + Prettier
使用 ESLint 官网推荐的规则 + Prettier 第三方的配置
Prettier 主要是做风格统一。代码格式化工具

3通过Vue-CLI生成的项目结构解读

1. 在Vue-CLI2.x中生成的项目结构中我们能够看到build文件夹和config文件夹
   这两个文件夹中存储了webpack相关的配置, 我们可以针对项目需求修改webpack配置

   
   
   Vue-CLI2.x构建项目

2. 在Vue-CLI3以后生成的项目结构中已经没有了build文件夹和config文件夹
   这么做的目的是为了化繁为简, 让初学者不用关心webpack, 只用关心如何使用Vue

   
   
   Vue-CLI3.x构建项目

3. 通过Vue-CLI3以后创建的目录结构解析

   
   
   完整目录结构.png
   
   

   node_modules文件夹: 存储了依赖的相关的包
   public文件夹: 任何放置在 public 文件夹的静态资源都会被简单的复制，
   而不经过 webpack。你需要通过绝对路径来引用它们
   一般用于存储一些永远不会改变的静态资源或者webpack不支持的第三方库
   src文件夹: 代码文件夹
   |----assets文件夹: 存储项目中自己的一些静态文件(图片/字体等)
   |----components文件夹: 存储项目中的自定义组件(小组件,公共组件)
   |----views文件夹: 存储项目中的自定义组件(大组件,页面级组件,路由级别组件)
   |----router文件夹: 存储VueRouter相关文件
   |----store文件夹: 存储Vuex相关文件
   |----App.vue:根组件
   |----main.js:入口js文件