简介
- CLI是Command-Line Interface,命令行界面，俗称脚手架
- vue cli 是一个官方发布的vue.js项目的脚手架
- 使用vue-cli可以快速搭建vue开发环境以及对应的webpack配置
使用前提-1.node 2.webpack
webpack依赖于node(npm)
vue.js官方脚手架工具使用了webpack模板，他在开发中提供了一套完整的功能，能够使我们开发过程中变得高效
vue CLI使用
安装脚手架3
终端安装！！！
sudo cnpm install -g @vue/cli
这是vue cli3，如果想要按照vue cli2方式初始化项目时是不可以的
需要拉去cli2模板?
同时拉取 2.x 模板 (旧版本)
Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：
sudo cnpm install -g @vue/cli-init
关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 `@vue/cli`。 如果你已经全局安装了旧版本的 `vue-cli `(1.x 或 2.x)，你需要先通过 `npm uninstall vue-cli -g `或 yarn global remove vue-cli 卸载它。 
脚手架二初始化项目
vue init webpack my-project
脚手架三初始化项目
vue create 项目名
脚手架2
ESLint : 对ES代码进行限制，暂时先不用
e2e test: => etoe test端到端 -> selectnium
use npm not yarn!
解析目录文件
packge.json
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
node 可以直接执行js文件
node本身是使用c++开发的，核心是V8引擎，谷歌开发的
js->字节码->浏览器，v8引擎：js->二进制代码
使用js开发服务器，摆脱浏览器的运行环境，使用node在服务器上运行。
"build": "node build/build.js"
rm: remove，删除已经打包过的dist的文件夹，再通过webpack进行配置
Runtime-only与Runtime-compiler
区别只在main.js
compiler: 在使用App是，先在Component进行注册，然后在template中进行使用
runtime-only: 不注册, render: h=> h(App) 渲染，箭头函数
相当于：
new Vue({
el: '#app',
render: function(h){
return h(App)
}
)}
h参数，接受到的实参其实是,createElement('标签(h1)',{标签的属性}, [ 'hello，world'])
最后渲染成<h1>hello,world</h1>
new Vue({
el: '#app',
render: function (createElement) {
//三个参数，'标签',{标签的属性}.[数据]
return createElement('h2',{
class:'box'},['Hello,world',createElement('button',['按钮'])])
}
})
template -> ast -> render -> virtual dom -> dom ui
使用render函数把App变成虚拟dom
runtime-only 性能更高, 代码量更少,render函数
runtime-compiler
.vue文件中的template是谁处理的呢？
是由vue-template-compiler！！！
脚手架 CLI3
- vue-cli3 是基于webpack4打造， vue-cli2还是webpack3
- vue-cli3设计原则是0配置，移除的配置文件根目录下的build和config等目录
- vue-cli3 提供了 vue ui命令，提供了可视化配置，更加人性化
- 移除了
static文件夹，新增了public文件夹，并且index.html移动到public中
按空格是选中和取消
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
配置文件都看不到了- - !
CLI3配置查看和修改
vue ui
箭头函数
//const ccc = (参数列表) => {}
const ccc = ()=>{
alert('1') }
const sum = (num1,num2) => {
return num1+num2}
//1.放入一个函数,小括号可以省略
const power = num => {
return num*num}
//2.函数中的代码数量问题
//函数代码块中只有一行代码,省略大括号和return
const test = () => {
console.log('hello,world');
console.log('hello,vue.js');
}
const mul = (num1,num2)=> num1*num2
console.log(mul(2, 4));
//执行那一行的函数体后，demo函数的返回值是undefine
const demo = () => console.log('hello demo')
such as
new Vue({
render: h => h(App),
}).$mount('#app')
箭头函数this
const obj = {
aaa(){
setTimeout(function () {
console.log(this) //window
})
setTimeout(()=>{
console.log(this) //obj
})
}
}
obj.aaa()
箭头函数中的this引用的就是最近作用域中的this
箭头函数是如何查找的？
向外层定义作用域中，一层层查找this，直到有this的定义
转载：https://blog.csdn.net/m0_37642480/article/details/116048444