cli
使用 cnpm 安装
npm install -g @vue / cli
3.x 及以上安装都是使用上面的指令， npm 和 cnpm 选择一个来安装就好。测试是否安装成功，在 命令窗口输入vue -V 查看 vue 脚手架版本号就是安装成功。如下图所示：
创建项目
创建项目需要注意：项目名不能有中文，不支持驼峰 ( 含有大写字母 )
#vue create 项目名
vue create vue-cli3
运行创建项目命令后弹出来的：
default 是 使用默认配置，默认安装及自动配置 babel ， eslint
如果选择默认选项 default ，将会构建一个最基本的 vue 项目（没有 vue-router 也没有 vuex ）
注意 ：上面两个 default 一个是 vue2 ，一个是 vue3 （我们现在学的是 vue2, 所以选择 vue2 即可）
Manually select features 是 自定义配置，需要我们手动配置，也可以自己选择需要配置的
这里我选择手动配置（Manually select features）
通过键盘上的 ↓ 方向键选中Manually select features并敲回车，会显示如下配置项
通过↑ ↓ 箭头选择你要配置的项，按 空格 是选中，按 a 是全选，按 i 是反选
选择你需要的配置项
这是我的配置项：
每个配置项的解释：
( ) Choose Vue version // 选择 vue 脚手架的版本
( ) Babel // 转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行。
( ) TypeScript // TypeScript 是一个 JavaScript （后缀 .js ）的超集（后缀 .ts ）包含并扩展了
JavaScript 的语法，
需要被编译输出为 JavaScript 在浏览器运行
( ) Progressive Web App ( PWA ) Support // 渐进式 Web 应用程序
( ) Router // vue
router （ vue 路由）
( ) Vuex // vuex （ vue 的状态管理模式）
( ) CSS Pre
processors // CSS 预处理器（如： less 、 sass ）
( ) Linter / Formatter // 代码风格检查和格式化（如： ESlint ）
( ) Unit Testing // 单元测试（ unit tests ）
( ) E2E Testing // e2e （ end to end ） 测试
选好配置项之后 按回车键
配置选中选了 choose Vue version ，会问你用哪个版本的脚手架，这里我选择的是 2.x 的
选择 css 预处理器
这里我选择的是 Sass/Scss(with dart-sass)
node-sass 是自动编译实时的， dart-sass 需要保存后才会生效。 sass 官方目前主力推 dart-sass 最新的特性都会在这个上面先实现。而且Sass/Scss 性能会更好 , 会更快一些。
选择如何存放位置
这里我选的是放在 package.json 里
是否保存当前配置
这里我选择的是 N 不保存，如果键入 Y 需要输入保存名字。如果保存的话下一次就不需要一步一步
地从头开始配置。
静待 Vue 安装这些项目环境
项目启动
-
cd 项目名 进入到工程目录
npm run serve 启动项目
打开浏览器输入网址 项目
成功启动
vue-cli3与2****版本区别
- vue-cli3基于webpack4打造，vue-cli2是基于webpack3
- vue-cli3的设计原则是"0配置"，移除了配置文件，build和confifig等
- vue-cli3提供 vue ui 的命令，提供了可视化配置
- 移除了static文件夹，新增了public文件夹，并将index.html移入了public文件夹
- 创建项目的命令 vue create 项目名
目录结构：
public 类似 static文件夹，里面的资源会原封不动的打包
src源码文件夹
src
主要用于写原码
. gitignore
排除目录【比如需要上传到 githulb 】
. babel
配置安装包
package. json
配置安装包
package-lock
锁文件【项目使用的版本】后期别人访问的时候，直接加载锁里面的版本信息；
src 下的 main.js
这里创建的 vue 实例没有 el 属性，而是在实例后面添加了一个 $mount(’#app’) 方法。
$mount(’#app’) ：手动挂载到 id 为 app 的 dom 中的意思
当 Vue 实例没有 el 属性时，则该实例尚没有挂载到某个 dom 中；假如需要延迟挂载，可以在之后手
动调用 vm.$mount() 方法来挂载
需要注意的是： 该方法是直接挂载到入口文件 index.html 的 id=app
紧跟潮流
大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。
这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分
