Vue学习第七天

Vue07

一.

Vue CLI

转存失败重新上传取消

使用Vue CLI依赖于Node和Webpack

---

安装Vue脚手架

npm install -g @vue/cli

//卸载脚手架        npm uninstall -g @vue/cli

想使用Vue CLI2

转存失败重新上传取消

这里安装比较慢所以推荐使用淘宝镜像

参考： https://www.cnblogs.com/bonelee/p/9995550.html

二.

Vue CLI2的使用

创建项目

转存失败重新上传取消

转存失败重新上传取消

转存失败重新上传取消    

如果选择了Eslint（代码规范），想关闭可以修改index.js下的useEslint改为false

三.

Vue程序运行过程

转存失败重新上传取消

在选择Vuebuild的时候，有两个版本，一个是runtime-compiler，另一个是runtime-only。

runtime-compiler执行的过程：template->ast->render->virtual dom->UI

runtime-only执行的过程：render->virtual dom->UI

所以我们开发时选择runtime-compiler更好，因为它执行过程少，比第一个的代码量也要少，性能更高。

转存失败重新上传取消

简单总结：

1.如果在之后的开发中，你依然使用template，就需要选择Runtime-compiler

2.如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only

四.

npm run build

 

转存失败重新上传取消

五.

npm run dev

转存失败重新上传取消

六.

转存失败重新上传取消

七.

Vue CLI3

转存失败重新上传取消

如果把选择的配置保存下来，想去删除。可以去C:\Users\jy\.vuerc删除。

 

八.

Vue UI

控制台输入vue ui 可以通过图形化界面修改配置信息配置，项目依赖

内容，运行项目

转存失败重新上传取消

转存失败重新上传取消

九.

如果想自己修改配置，可以创建vue.config.js文件，

module.exports = {

}

十.

箭头函数

const a = () => {

}

两个参数

const sum = (num1, num2) => {

    return num1 + num2;

}

一个参数,括号可以省略

const power = num => {

    return num * num;

}

如果函数体中只有一行代码，return可以省略

const sum = (num1, num2) => num1 + num2;

 

h => h(App)       ------------>   function (h){

                                                       return h(App);    

                                                   }

箭头函数中的this是如何查找的？

向外层作用域中，一层层查找this，直到有this的定义。