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 <space> to select, <a> to t
oggle all, <i> 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生成的项目结构解读
在Vue-CLI2.x中生成的项目结构中我们能够看到build文件夹和config文件夹
这两个文件夹中存储了webpack相关的配置, 我们可以针对项目需求修改webpack配置
Vue-CLI2.x构建项目
在Vue-CLI3以后生成的项目结构中已经没有了build文件夹和config文件夹
这么做的目的是为了化繁为简, 让初学者不用关心webpack, 只用关心如何使用Vue
Vue-CLI3.x构建项目
通过Vue-CLI3以后创建的目录结构解析
完整目录结构.png
node_modules文件夹: 存储了依赖的相关的包
public文件夹: 任何放置在 public 文件夹的静态资源都会被简单的复制，
而不经过 webpack。你需要通过绝对路径来引用它们
一般用于存储一些永远不会改变的静态资源或者webpack不支持的第三方库
src文件夹: 代码文件夹
|----assets文件夹: 存储项目中自己的一些静态文件(图片/字体等)
|----components文件夹: 存储项目中的自定义组件(小组件,公共组件)
|----views文件夹: 存储项目中的自定义组件(大组件,页面级组件,路由级别组件)
|----router文件夹: 存储VueRouter相关文件
|----store文件夹: 存储Vuex相关文件
|----App.vue:根组件
|----main.js:入口js文件
