Vue-CLI2及Vue-CLI3手把手教学

[========80% ]已完成vue-cli 距离完成vue全家桶仅剩vue-router，element-ui。加油！小伙子，奥里给，未来可期。

---

---

前言

介绍:
开发大型项目，必然需要用到Vue CLI——使用vue.js开发大型应用时，需要考虑代码目录结构，项目结构和部署、热加载、代码单元测试等等事情。如果每个项目都要手动完成这些工作，那效率是比较低效的，所以通常我们会使用一些脚手架工具来帮助完成这些事情。
CLI全称Command-Line Interface，中文翻译为命令行界面，俗称脚手架
Vue CLI是一个官方发布的vue.js项目脚手架
使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Vue-CLI安装使用

1.安装Node.js

Vue-CLI其实是基于webpack开发的，因此也依赖Node。
node直接百度搜 上官网，选择系统对应版本安装。
查看node版本：

node --version

---

二、安装Vue-CLI脚手架

1.Vue-cli3安装

直接全局安装， -g(global全局全球)

npm install-g @vue/cli
#此命令安装的是Vue-CLI3版本

安装若不成功的话，用管理员身份打开终端(命令行)执行

npm clean cache -force
npm install -g @vue/cli

查看版本：

vue --version

2.Vue-CLI2安装

使用Vue CLI3版本，想按照Vue CLI2的方式初始化项目是不行的。

原因：Vue CLI3和旧版使用了相同的vue命令，所以Vue CLI2被覆盖了。若想继续用旧版本的vue init功能，需要全局安装一个桥接工具，拉取2.x模板(旧版)
具体操作如下：

npm install -g @vue/cli-init
#'vue init' 的运行效果将会跟'vue-cli@2.x'相同 
vue init webpack my-project

2.总结：CLI3\CLI2

直接装版本3，再加个桥接工具，即可以3也可以2。

---

三、使用Vue-CLI2初始化项目

1.初始化

a.终端执行

vue init webpack my-project
#配置时按空格选中和取消

b.初始化配置选项解读：

选项解读(部分)：
ESLint选项：lint中文限制，就是代码规范
Author选项：中文作者，可以改，找到Users文件夹里的Admin里的.gitconfig文件配置一下就行
选项解读(全)：

c.配置文件解读：

跑完初始化完，配置文件直接找package.json。

     build文件夹和config文件夹是配置文件夹、node_modules文件夹是一些依赖，
     写代码的目录是src文件夹。
     .babelrc一些配置如浏览器适配
     .editorconfig代码风格，如首行缩进
     .eslintigno忽略代码规范的文件文件夹
     .gitgnore忽略git上传的
     .eslintrc.js代码规范检测
     .postcssrc.js配置css转化相关，不用管
     .package-lock.json和package.json有映射关系，真实版本，不用担心，了解即可，学node再深入。

d.项目运行

#跑项目 
npm run dev 
#搭建本地服务，把项目跑起来。

阅读代码顺序：main.js —> index.html

2.runtime-only 和 runtime-compiler区别

a.比较二者main.js代码

区别在main.js 一个用注册(compiler)，一个用render(only)

b.深入vue程序运行过程 比较

《runtime-compiler》    template -> ast -> render -> virtual dom -> 真实DOM
《runtime-only》                           render -> virtual dom -> 真实DOM

结论：only性能更高,代码量更少文件小
提示：工作中用runtime-only更多

c.继续深入render函数

render:function(creatElement){
              // 1、普通用法: createElement("html标签",{标签属性},[""])
              //   举例
              //     return createElement("h2",{class:'box'},{'helloworld',createElement('button',["按钮"])})

              // 2、传入组件对象
              return createElement(App)
          }

---

四、使用Vue-CLI3初始化项目

vue-cli3更加简洁，无build和config目录，“0配置原则”
提供了vue ui命令，提供 可视化 配置，更加人性化
移除static文件夹(assets图片处理;static图片原封不动),并且index.html移动到public

1.初始化

a.终端执行

vue create my-project
#vue create乃脚手架3
#vue init webpack是脚手架2
#配置时按空格选中和取消

b.初始化配置选项解读：

保存的配置在Users里的Admin的.vuerc
提示的VCS是 version control system(版本控制git/svn)

c.配置文件解读：

选项解读(部分)：
.brwserslistrc配置浏览器相关选项，兼容性适配
.gitgnore忽略git上传的
babel.config.js不用管，关于babel
README.md 解释文档（好像是markdown写的）
选项解读(全)：

d.项目运行

npm run serve
#不清楚可以直接阅读package.json

2.main.js解读

多了Vue.config.productionTip 
-->提示信息，告诉你构建了哪些东西
没了el，vue对象后面多了.$mount（'#app'）
-->结论:  el和vue({}).$mount（'#app'）等价

五、使用vue ui配置项目

前面提到，vue-cli3提供了vue ui命令，提供 可视化 配置，更加人性化。
下面我们来学习vue ui使用：

1、启动本地服务器

启动本地服务器 vue ui,终端输入(任意位置皆可)

vue ui

在可视化操作界面 操作
找到工作目录，导入文件夹

安装依赖直接找到安装依赖按钮，图形化操作非常简单人性化。

总结

直接全局装cli3版本，然后npm加个桥接工具。
跑cli2用vue init webpack project
跑cli3用vue create project
cli3有可视化操作界面，文件夹更加简洁
runtime only比compiler好，速度更快，代码更轻，占用更小