Vue的render函数&修改默认配置

一、render函数

使用之前的单文件组件中的写法修改main.js,精简一下js，看效果。

/*
  该文件是整个项目的入口文件
*/
// 引入Vue
import Vue from 'vue'
// 引入App组件，他是所有组件的父组件
// import App from './App.vue'
// 关闭vue的生产提示
Vue.config.productionTip = false
// 创建Vue实例对象---vm
new Vue({
  el:'#app',
  // 一会解释，完成的功能：将组件App放入容器中
  // render: h => h(App),

  template:`
你好`,
  // components:{App}
})
//}).$mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

把之前单文件组件代码移动到脚手架里面运行

提示：你使用的vue时残缺(精简)版本的（缺少模板解析器），并给了你两个解决方案，一个是使用render，另一个是引入完整版的vue(包含模板解析器)而不是残缺版

原因：项目的vue_test\node_modules\vue\package.json文件的module配置项使用了残缺版的Vue

找到dist/vue.runtime.esm.js文件添加几个console.log()刷新项目，观察效果。通过修改源码验证了确实是使用了精简版的vue。

解决问题的第一种方式：引入完整版vue

使用import Vue from 'vue/dist/vue'重新引入vue，其中路径vue/dist/vue直接定位到完整版功能的vue.js文件，其功能更加强大。

解决问题的第二种方式：render函数

/*
  该文件是整个项目的入口文件
*/
// 引入Vue
import Vue from 'vue'
// 引入App组件，他是所有组件的父组件
// import App from './App.vue'
// 关闭vue的生产提示
Vue.config.productionTip = false
// 创建Vue实例对象---vm
new Vue({
  el:'#app',
  // 一会解释，完成的功能：将组件App放入容器中
  // render: h => h(App),
  render(createElement){
    console.log(typeof createElement)
    //                   标签   内容
    return createElement('h2','你好啊')
  }

  // template:`
你好
`,
  // components:{App}
})
//}).$mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

render是一个函数，vue帮你调用，调用时给你传递一个参数（帮你创建一个具体元素的参数）

render箭头函数的简写形式，第一个参数是（h2）是html5种的内置标签，第二参数是内容。若通过render使用组件是直接调用一个参数，参数为引入的组件。

参数为组件时，只写一个参数就行，即写组件。

总结：
关于不同版本的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函数去指定具体内容。

二、修改默认配置

脚手架干活依托着webpack，webpack依靠webpack.config.js配置文件（vue隐藏了）

使用vue inspect > output.js命令把vue的默认配置导入到一个js文件。

修改output.js无效，它仅仅是配置的输出文件。

以下五项（属于默认配置）不能修改。

要想修改需要在项目下新建一个名为vue.config.js的文件。文件内容参考官网。（https://cli.vuejs.org/config/#pages）

修改入口文件例子

注意：vue.config.js里面不能注释掉，什么也不写，会报错。写了vue.config.js文件，里边的配置项就不要全部注释，需要写上新的配置。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,

  pages: {
    index: {
      // entry for the page
      entry: 'src/main.js',
    },
  },

  lintOnSave:false,//关闭语法自动检查
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14