Vue脚手架相关

目录

1、分析vue脚手架

2、render函数

**那么我们为什么要使用render那？

** 那么我们为什么要使用精简版的vue？（不带模板解析器vue）那？

 **那么为什么.vue文件中的template标签中的内容能被识别？？？？

关于不同版本的Vue：            1.vue.js与vue.runtime.xxx.js的区别：                (1).vue.js是完整版的Vue，包含：核心功能+模板解析器。                (2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。

3、修改默认配置

4、ref属性（获取页面的dom元素）

 5、prop属性（动态传递props属性）

 6、maxin属性(复用代码)

全局混合：

局部混合：

7、插件

8、scorp （确保操作的样式类唯一）

---

1、分析vue脚手架

 

这是webpack中一个插件帮我们完成的功能，默认去这个json文件中寻找

main.js文件是入口文件，通过render将app组件引入

main.js不需要在index.html页面引入，也能找到root容器

这些都是脚手架配置好的

2、render函数

曾经我们在单文件组件时，这样书写main.js文件，但这在vue脚手架中是行不通过。

 我们在脚手架中这样写

我们在这里的main.js里引入的vue对于右边的vue的model函数

render最原始的写法 

 

**那么我们为什么要使用render那？

因为我们引入的vue是精简版的vue，而不是带着模板解析器的完整vue，因此，

vue无法解析其中的template模板，这时我们引入render来识别template
 

** 那么我们为什么要使用精简版的vue？（不带模板解析器vue）那？

因为webpack在帮我们打包时已经将.vue文件转化成我们能识别的文件，这时继续使用vue的模板解析器未免冗余。

我们可以举以下例子，我们当然选择第二种

 **那么为什么.vue文件中的template标签中的内容能被识别？？？？

这是因为vue官方帮我们导了额外专门的库来识别<template>标签

关于不同版本的Vue：
    
        1.vue.js与vue.runtime.xxx.js的区别：
                (1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
                (2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。

        2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用
            render函数接收到的createElement函数去指定具体内容。

3、修改默认配置

vue建议的配置很好，不建议修改

4、ref属性（获取页面的dom元素）

传统的js获取dom： 

 vue通过ref属性获取dom

 5、prop属性（动态传递props属性）

对数据类型进行限制，

 

 

 ***props中的数据默认不能被修改

如果想修改，将其放入data属性中，将props中的属性传给data中，然后通过methods调用方法使data中的属性更改。

  

 6、maxin属性(复用代码)

全局混合：

组件里有的属性，不从maxin里面拿， 比如这里的x，y

但生命周期钩子不是，两个都会去挂载

但如果全局混合，所有的组件都会去调用maxin的方法和属性了

局部混合：

 跟全局混合类似，但只有当前页面引入的组件才会有maxin里的属性和方法

7、插件

 使用vue.use来使用插件

插件里的参数，有vue，可以使用全局对象

 

8、scorp （确保操作的样式类唯一）

如果不加scorp属性，就会导致后来者居上，被覆盖掉 

  

 加了scorp就能保证是操作地自己的类

底层原理，vue给我们绑定scorp属性的加了唯一标识

但一般来说，app.vue组件不用这个属性，用了只能渲染自己app.vue里的了