vue学习 --- 第六天

目录：

1、vue组件化开发思想

2、注册vue的全局组件

3、注册vue的局部组件

4、vue的开发模式解析

5、vue cli安装和使用

6、vue的项目目录分析

7、jsconfig.json的作用

8、引入vue的版本

9、补充：单文件vue  style是有自己的作用域

10、补充：vite创建一个vue项目

一、vue组件化开发思想

二、注册vue的全局组件

注意：

（1）一个对象就是一个组件。组件对象里面有许多optionsAPI，使用组件需要先注册组件，在app.component()里面写两种格式：

或者

 （2）template对应的内容可以是模板字符串的内容，也可以是某id的其他template标签

（3）app.component()可以注册多个全局组件，

 （4）每个组件的optionsAPI默认只作用在自己的作用域里面。

 

 大驼峰的命名方法在html文件里面是不能直接使用<MyComponentName></MyComponentName>这样，只有在.vue文件里面可以这样子用。（原因是html不区分大小写）

全局组件注册完成之后是可以在其他组件template里面正常使用全局组件的。

三、注册vue的局部组件

上图的CompoentA和CompoentB是放在script里面的。

 注意：

（1）optionsAPI里面还有一个叫componens，可以用来注册局部组件。

（2）components里面放的是组件对象，对象里面同样有template和optionsAPI。

（3）components里面也同样可以注册许多局部组件

四、vue的开发模式解析

 

五、vue cli安装和使用

 

注意：

（1）我们一般都是手动选择预设 

（2）babel是对es代码进行转换

（3）linter / formatter是对ts代码进行格式化

六、vue的项目目录分析

 

 注意：

这个文件是用来浏览器适配的。 

这个文件是给vscode用的，可以更好的给我们代码提示

 在   .vue文件中如何设置全局组件和局部组件呢？

全局组件：

局部组件：

七.jsconfig.json的作用

 ​​​

作用是：让在vue.config.js配置的东西变得有提示信息。比如：配置路径别名时候

 上图的math.js的位置

 

我们发现上图的../../../math不能直观看见用的到底是哪个文件，于是我们想配置别名来方便查找引进的文件的位置。

我们想配置webpack来设置路径别名，方便简化../../../math这样子的代码（去vue.config.js文件配置）：

 下图是vue.config.js原来的样子

 下图就是添加了路径别名utils

 然后就可以正常使用了：

但是，这中途有个友好的一点就是，我们已经配置了utils了，但是vscode没有提示我们文件下的内容，于是我们要么手动写入，或者配置jsconfig.js来解决：

下图是jsconfig.json的原来的样子 ：

下图是配置paths的utils/*  

 

 配置完成之后以后在js代码里面写入路径别名效果：

八、引入vue的版本

新旧vue的不同点：在编译template内容的方式上有很大差别，新版vue预编译template是在.vue文件被编译时进行；就版本写法不一样所以编译依靠源码进行编译template里面的内容。旧版本的写法的template不被新版本预编译方式支持，不可使用。

上图显示的两个版本的createApp，一个是从vue，一个是vue/dist/vue.esm-bundler就是两个版本的，后者就旧版本，包括两个流程。他们都是为了控制template的。 

vue的这个渲染流程就是这样子 ，通过编译转换成虚拟结点再形成虚拟DOM

 上图是不管什么版本的操作template都是这样子转换的。

 上图说的是新的版本的 . vue文件在编译的时候就有vue-loader在预先编译template标签，所以不需要用到源码（vue/dist/vue.esm-bundler）来把template里面的内容进行编译，但是旧版本的写法是这样子的所以需要借助vue/dist/vue.esm-bundler的源码来完成编译

 九、补充：单文件vue  style是有自己的作用域

(1)vue3建议在vscode里面下载volar插件

（2）webpack的入口文件是main.js 

（3）在每个组件的style标签上加scoped可以防止让class名或id相同的样式发生重写。

其原理是在标签上加了一个data-v-xxxxxxxxx的标识

 

十、补充：vite创建一个vue项目

两种创建vue项目的方法。vite是趋势。

输入 create-vue@lastest 命令后会提示需要先下载create-vue@lastest工具

 

 

 这两种创建vue项目的方式不一样，但是一样的方法使用vue，只是最后打包vue项目的工具不一样，一个是webpack，另外一个是vite