脚手架我们一般,使用最近的版本,vue的核心技术我们使用vue2比较多。

使用步骤

vue的脚手架(2022-04-23学习笔记)_配置文件


不配置淘宝镜像下载速度就会比较慢。

vue的脚手架(2022-04-23学习笔记)_配置文件_02


你需要使用vue2还是vue3呢?

vue的脚手架(2022-04-23学习笔记)_vue.js_03


vue的脚手架(2022-04-23学习笔记)_vue.js_04


vue的脚手架(2022-04-23学习笔记)_前端_05


成功创建了一个项目。

vue的脚手架(2022-04-23学习笔记)_前端_06


开启一个内置的小服务器,我们可以看到我们的项目。

vue的脚手架(2022-04-23学习笔记)_解析器_07

文件结构

git的忽略文件。

vue的脚手架(2022-04-23学习笔记)_前端_08


balel的配置文件,可以直接使用官方写好的就可以。

vue的脚手架(2022-04-23学习笔记)_配置文件_09


包的说明书:

vue的脚手架(2022-04-23学习笔记)_前端_10


vue的脚手架(2022-04-23学习笔记)_配置文件_11


对项目的说明。

vue的脚手架(2022-04-23学习笔记)_复用_12


vue的脚手架(2022-04-23学习笔记)_前端_13

main.js

执行完指令npm run serve以后,首先执行的就是main.js文件。

vue的脚手架(2022-04-23学习笔记)_解析器_14


vue的脚手架(2022-04-23学习笔记)_前端_15


vue的脚手架(2022-04-23学习笔记)_复用_16

App.vue

vue的脚手架(2022-04-23学习笔记)_前端_17


放静态资源。

vue的脚手架(2022-04-23学习笔记)_配置文件_18


组件。

vue的脚手架(2022-04-23学习笔记)_配置文件_19


vue的脚手架(2022-04-23学习笔记)_解析器_20


vue的脚手架(2022-04-23学习笔记)_复用_21


vue的脚手架(2022-04-23学习笔记)_复用_22


vue的脚手架(2022-04-23学习笔记)_vue.js_23


vue的脚手架(2022-04-23学习笔记)_前端_24

render

vue的脚手架(2022-04-23学习笔记)_配置文件_25


vue的脚手架(2022-04-23学习笔记)_配置文件_26


你引入了残缺版的vue。没有模板解析器的vue。

vue的脚手架(2022-04-23学习笔记)_复用_27

vue的脚手架(2022-04-23学习笔记)_复用_28


引入完整版的vue。

vue的脚手架(2022-04-23学习笔记)_前端_29


vue的脚手架(2022-04-23学习笔记)_vue.js_30


vue的脚手架(2022-04-23学习笔记)_vue.js_31


vue的脚手架(2022-04-23学习笔记)_复用_32


vue:核心部分和模板解析器。

模板解析器很大的。webpack本身就能够解析模板,所以我们不需要vue来解析模板。

vue的脚手架(2022-04-23学习笔记)_解析器_33


vue的脚手架(2022-04-23学习笔记)_复用_34


只有创建vm的时候才用render创建模板。

vue.config.js

脚手架工作的配置文件。我们也可以修改。

vue的脚手架(2022-04-23学习笔记)_解析器_35


关闭语法检查。

vue的脚手架(2022-04-23学习笔记)_复用_36

总结

vue的脚手架(2022-04-23学习笔记)_解析器_37


vue的脚手架(2022-04-23学习笔记)_前端_38


vue的脚手架(2022-04-23学习笔记)_解析器_39

ref属性

可以用在html标签上,也可以用在组件标签上。用在组件标签时候,拿到的是组件实例对象。

vue的脚手架(2022-04-23学习笔记)_前端_40


vue的脚手架(2022-04-23学习笔记)_vue.js_41

props配置

vue的脚手架(2022-04-23学习笔记)_配置文件_42

vue的脚手架(2022-04-23学习笔记)_复用_43


vue的脚手架(2022-04-23学习笔记)_复用_44


vue的脚手架(2022-04-23学习笔记)_前端_45

总结

vue的脚手架(2022-04-23学习笔记)_解析器_46

maxin混入

复用配置。

vue的脚手架(2022-04-23学习笔记)_解析器_47


vue的脚手架(2022-04-23学习笔记)_复用_48


局部引入混合。

vue的脚手架(2022-04-23学习笔记)_配置文件_49


全局应用混合。

vue的脚手架(2022-04-23学习笔记)_解析器_50


vue的脚手架(2022-04-23学习笔记)_前端_51

插件

插件的本质就是一个对象,包含一个install的方法。

创建一个插件。

vue的脚手架(2022-04-23学习笔记)_vue.js_52


引入插件。

vue的脚手架(2022-04-23学习笔记)_配置文件_53


vue的脚手架(2022-04-23学习笔记)_前端_54


插件可以做什么?

vue的脚手架(2022-04-23学习笔记)_复用_55


use一下插件,我们会有很多强大的方法。一直use可以用很多插件。

总结——

vue的脚手架(2022-04-23学习笔记)_配置文件_56

scoped样式

局部样式。只用于该组件的。

vue的脚手架(2022-04-23学习笔记)_配置文件_57


可以写css也可以写less。安装less-loader要注意版本。

vue的脚手架(2022-04-23学习笔记)_vue.js_58


查看版本的种类。

vue的脚手架(2022-04-23学习笔记)_解析器_59


vue的脚手架(2022-04-23学习笔记)_前端_60