目录
6.Runtime + Compiler与Runtime-only区别
1.Webpack与脚手架
使用Vue.js开发大型应用的时候，需要考虑代码的目录结构、项目结构、部署、热加载、代码单元测试等一系列工作，如果都要手动完成这些工作，则效率比较低，这时就需要借用脚手架工具来完成这些事情，如果继续靠着webpack，显然不能满足我们的要求，光各种install的版本控制就能忙的一匹；
此时，Vue官方推荐的Vue CLI则可以完美的解决这一系列问题；
CLI全称是command-line interface，俗称脚手架，而Vue CLI是一个官方发布vue.js项目脚手架，使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置；
npm：官方命令，比较稳妥，缺点在于需要代理，install的时候比较慢，且要重试多次；
cnpm：淘宝定制的cnpm命令行工具来取代默认的npm，安装命令如下：Npm install -g cnpm --registry=
https://registry.npm.taobao.org，安装速度快，但针对某些install缺少包，且容易出现版本控制问题；
我个人还是继续用npm，慢就慢点，无非是多重试几次，总比各种版本引发的兼容性问题可控；
2.Vue CLI使用
这里我是用Vue CLI3，而脚手架3与2的安装方式不同：
脚手架3：npm install -g @vue/cli
脚手架2：npm install -g @vue/cli-init
那是不是意味着我们需要同时安装脚手架3和2版本才行呢？不用，官网给出的解决方案是：先安装CLI3，然后再通过桥接通过，就可以使用CLI2了；
官网链接：https://cli.vuejs.org/zh/guide/creating-a-project.html#%E4%BD%BF%E7%94%A8%E5%9B%BE%E5%BD%A2%E5%8C%96%E7%95%8C%E9%9D%A2
2.1.安装CLI3
从下午开始安装，然后这3个命令来回切换
npm uninstall vue-cli -g
npm cache clean --force
npm install -g @vue/cli
然后下载桥接工具：npm install -g @vue/cli-init
一直安装到18:30，哎，无语了，真的是无语了........
注意：
运行npm cache clean --force命令时，最好以管理员身份运行cmd，至于其clean的目录则是：C:\Users\用户名\AppData\Roaming\npm-cache
这里可以自己去这个目录下手工清理，不用cache clean命令；
3.Vue-CLI2新建项目
①在命令窗口输入Vue-CLI2创建项目的命令：
vue init webpack vuecli2test这里一定要注意是vue命令，而不是npm命令，否则会报错：command not found: create-webpack
②然后，Vue-CLI2会依次提示下面的配置参数信息：
? Project name (vuecli2test)输入项目名字，之前init中的那个只是文件夹的名字，不是项目名字
? Project description (^ Vue.js project)项目描述，默认值就是()里面的内容
? Author (coderYJ xxxxx)作者，默认值是()里面的值，默认是git账号
? Vue build (Use arrow keys)选择Vue Build环境，是选择Rumtime + Compiler方式，还是选择Runtime-only，这里选择only模式
> Runtime + Compiler: xxxxxxxx
Runtime-only:xxxxxxxxxx
? Install vue-router是否安装路由 n
? Use ESLint to lint your code 是否对ES代码进行限制，即编写是否规范，例如当你在结尾添加一个“,”时就会导致编译失败，总之一句话，ESLint代码规范能让你怀疑人生，并且针对JS的ESLint规范会与其他语言的规范差别很大，对于后台全栈开发者来说，短时间内很难适应；
? Pick an ESLint preset(Use arrow keys)当你选择Y的时候，这个选项让你选择哪个规范去遵循：
>Standard标准规范
>Airbnb爱彼迎公司规范
>none自定义规范
? Set up unit tests是否集成单元测试
? Setup e2e tests with Nightwatch是否依赖于Nightwatch来实现端end到端end的自动化测试？n
? Should we run npm install for you after the project has been created?你的项目是使用npm工具来管理，还是yarn工具来管理，还是自己直接来管理？
>yes,use npm
>yes,use yarn
>no,i will handle that myself
4.Vue-CLI2目录结构
整个项目的配置入口是package.json
| { "name": "vuecli2test", "version": "1.0.0", "description": "vue2clitest", "author": "suntj", "private": true, "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "lint": "eslint --ext .js,.vue src", "build": "node build/build.js" }, "dependencies": { "vue": "^2.5.2" }, "devDependencies": { "autoprefixer": "^7.1.2", "babel-core": "^6.22.1", "babel-eslint": "^8.2.1", "babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-loader": "^7.1.1", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-vue-jsx": "^3.5.0", "babel-preset-env": "^1.3.2", "babel-preset-stage-2": "^6.22.0", "chalk": "^2.0.1", "copy-webpack-plugin": "^4.0.1", "css-loader": "^0.28.0", "eslint": "^4.15.0", "eslint-config-standard": "^10.2.1", "eslint-friendly-formatter": "^3.0.0", "eslint-loader": "^1.7.1", "eslint-plugin-import": "^2.7.0", "eslint-plugin-node": "^5.2.0", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^3.0.1", "eslint-plugin-vue": "^4.0.0", "extract-text-webpack-plugin": "^3.0.0", "file-loader": "^1.1.4", "friendly-errors-webpack-plugin": "^1.6.1", "html-webpack-plugin": "^2.30.1", "node-notifier": "^5.1.2", "optimize-css-assets-webpack-plugin": "^3.2.0", "ora": "^1.2.0", "portfinder": "^1.0.13", "postcss-import": "^11.0.0", "postcss-loader": "^2.0.8", "postcss-url": "^7.2.1", "rimraf": "^2.6.0", "semver": "^5.3.0", "shelljs": "^0.7.6", "uglifyjs-webpack-plugin": "^1.1.1", "url-loader": "^0.5.8", "vue-loader": "^13.3.0", "vue-style-loader": "^3.0.1", "vue-template-compiler": "^2.5.2", "webpack": "^3.6.0", "webpack-bundle-analyzer": "^2.9.0", "webpack-dev-server": "^2.9.1", "webpack-merge": "^4.1.0" }, "engines": { "node": ">= 6.0.0", "npm": ">= 3.0.0" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] } |
- build：存放打包/运行时的各个工作内容，包括根据环境融合不同版本的conf.js文件、删除之前已经打包好的文件等等工作；
B、config：存放各种变量，打包的时候会引用；
C、node_modules：安装的node模块；
D、src：编写业务逻辑的地方；
E、static：存放静态文件，且npm打包的时候会把文件原封不动的放到dist目录下，文件名也不会进行修改；
F、.babelrc：banel-loader配置文件；
G、.editorconfig：文件编码风格规定，例如编码、换行end_of_line、首行缩进indent_size、文件最后一行再新增一行insert_final_newline、删除不必要的空格trim_trailing_whitespace；
H、.eslintignore：该目录下的文件，即便代码编写不规范，也不会进行检验；
I、.gitignore：不需要上传到服务器的文件列表；
J、.eslintrc.js：代码检查时所用的规则，里面都是配置的规则；
K、.postcssrc.js：CSS文件转化时的一些配置；
L、index.html：前端工程入口HTML文件模板；
M、package.json：管理NODE安装包；
N、package-lock.json：node_modules里面存放着你磁盘真实安装的版本，而package.json里面指定的是一个版本的浮动区间，而package-lock.json就做了这2个文件之间的映射关系
O、README.md：项目开源时的一些说明；
4.1.扩展
一开始的时候，js代码只能运行在浏览器中，后来直到node出现，node是以谷歌的V8引擎为基础，再以C++开发，提供一个js的运行环境，且node还提供了访问操作系统的API接口；
在之前的浏览器，js代码先变成字节码，然后才被浏览器加载，到了谷歌的V8引擎后，该引擎则直接把js代码变成二进制，然后直接运行，所以，谷歌V8引擎运行速度明显比其他浏览器要快，后来各个浏览器厂商也开始仿照V8引擎的特点来开发新引擎；
5.如何关闭ESLint规范？
打开/config/index.js文件，找到“useEslint”并设置为false即可；
6.Runtime + Compiler与Runtime-only区别
6.1.template解析流程
Vue实例的template属性--(解析)-->ast抽象语法树--(编译)-->render函数--(翻译)-->virtual dom--(渲染)-->UI
6.2.template工作流程
template是由vue-template-compiler来把其转变为render函数，dev时vue-template-compiler会把全部template转成render函数，编译完毕之后，交给prod环境时，此时的prod环境就不需要再去安装vue-template-compiler了；
这里可以打开package.json文件，在“devDependencies”中是明确需要vue-template-compiler来完成template的编译工作，而一旦编译工作完成交给prod环境时，对应的“dependencies”中仅仅需要vue环境即可；
| "dependencies": { "vue": "^2.5.2" }, "devDependencies": { "autoprefixer": "^7.1.2", "babel-core": "^6.22.1", "babel-eslint": "^8.2.1", "babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-loader": "^7.1.1", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-vue-jsx": "^3.5.0", "babel-preset-env": "^1.3.2", "babel-preset-stage-2": "^6.22.0", "chalk": "^2.0.1", "copy-webpack-plugin": "^4.0.1", "css-loader": "^0.28.0", "eslint": "^4.15.0", "eslint-config-standard": "^10.2.1", "eslint-friendly-formatter": "^3.0.0", "eslint-loader": "^1.7.1", "eslint-plugin-import": "^2.7.0", "eslint-plugin-node": "^5.2.0", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^3.0.1", "eslint-plugin-vue": "^4.0.0", "extract-text-webpack-plugin": "^3.0.0", "file-loader": "^1.1.4", "friendly-errors-webpack-plugin": "^1.6.1", "html-webpack-plugin": "^2.30.1", "node-notifier": "^5.1.2", "optimize-css-assets-webpack-plugin": "^3.2.0", "ora": "^1.2.0", "portfinder": "^1.0.13", "postcss-import": "^11.0.0", "postcss-loader": "^2.0.8", "postcss-url": "^7.2.1", "rimraf": "^2.6.0", "semver": "^5.3.0", "shelljs": "^0.7.6", "uglifyjs-webpack-plugin": "^1.1.1", "url-loader": "^0.5.8", "vue-loader": "^13.3.0", "vue-style-loader": "^3.0.1", "vue-template-compiler": "^2.5.2", "webpack": "^3.6.0", "webpack-bundle-analyzer": "^2.9.0", "webpack-dev-server": "^2.9.1", "webpack-merge": "^4.1.0" } |
6.3.结论
runtime-only：直接从render函数开始来作为起点，不需要template属性，直接到UI；该模式下Vue实例是不能编写template属性的，因为其没法编译；
runtime+compiler：从原始的template作为起点，一步一步经过render再到UI；
因此，runtime-only相比runtime+compiler，代码量更少，性能更快；
7.Vue-CLI3与Vue-CLI2的区别
①CLI3是基于webpack4，CLI2是基于webpack3；
②CLI3设计原则是“0配置”，移除了配置文件根目录下的build和config等目录，目录更加简洁；
③CLI3提供了vue ui命令，提供了可视化配置，更加方便；
④CLI3移除了static文件夹，新增public文件夹，且index.html移动到了public中；
8.Vue-CLI3新建项目
首先在命令窗口输入：
vue create vuecli3test
然后依次提示如下：
①? Please pick a preset：选择配置
>default(babel,eslint)：默认配置
manually select features：手动选择特性-按空格选择
②? Where do you prefer placing config for Babel,PostCSS,ESLint,etc.?：例如babel/postcss/eslint等配置文件，你想放在哪里？
>in dedicated config files：单独的配置文件
In package.json：放在package.json中
③? Save this as a preset for future projects：刚才的配置是否作为未来所有项目的配置选项
④? Pick the package mananger to use when installing dependencies：选择包管理工具
>use yarn：使用yarn
Use npm：使用npm
9.Vue-CLI3目录结构
①node_modules：node安装包的存放路径；
②public：相当于CLI2中的static文件夹；
③src：业务代码；
④.browserslistrc：浏览器配置；
⑤.gitignore：git提交时忽略的文件；
⑥babel.config.js：babel配置文件；
⑦package.json：node配置文件，隐藏了一部分配置；
⑧package-lock.json：版本之间的映射；
⑨README.md：项目说明；
下面继续看一下package.json文件
| { "name": "vuecli3test", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" }, "dependencies": { "core-js": "^3.6.5", "vue": "^2.6.11" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-service": "~4.5.0", "vue-template-compiler": "^2.6.11" } } |
这里打包的命令是npm run build，而测试用的服务器的命令是npm run serve；
这里，CLI3通过cli-xxx方式隐藏了大量的配置文件，我们这里不能再像CLI2中看到对应的配置信息了；
再看看入口js文件main.js
| import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') |
这里没有了el属性，然后这里直接使用了render了，另外el属性底层还是使用的mount函数；
10.查看CLI3项目配置文件
既然CLI3隐藏了大量的配置，那么如何查看那些被隐藏的配置呢，方法有3种：
10.1.UI配置：vue ui
vue ui会启动配置服务器，然后通过http://localhost:8000/project/来访问；
该配置服务器是面向所有项目的，而不是特定的某个项目，你需要在“导入”模块，导入你想要配置的项目，然后进行配置，下面是截图：
选择“导入”，导入我们需要配置的项目
10.2.修改配置文件
/node_modules/@vue/cli-service/webpack.config.js是入口配置文件，该文件里引用了/node_modules/@vue/cli-service/lib/Service.js配置文件，且lib目录下还有各种配置的文件夹，下面是截图：
10.3.直接新建配置文件
新建vue.config.js文件，直接通过module.exports = {}中配置属性，Vue最后会把这个js文件与系统配置文件进行合并；
因为运行的时候，CLI会加载这个文件来把这个配置文件与其他配置文件来融合，因此，这个文件名必须是这样，不能随意修改；
11.版本为何与package.json中不一致
在package.json中配置的“devDependencies”中vue-template-compiler的版本是：^2.6.11
但在UI的配置中，开发依赖的版本是2.6.12，这里我们打开/node_modules/vue/dist/vue.js也就是我们安装的node的生产版本的vue.js里面用的是Vue.js v2.6.12；
package.json中配置的vue-template-compiler是2.6.11；
package-lock.json中配置的vue-template-compiler是2.6.12，即与发布部署版本的Vue版本保持一致；
205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
