vue2.0 vue脚手架 render函数

之前学Vue的合理的写法

new Vue({
  el: '#app'
  components:{App}
})

这样子写虽然控制台没报错,但是你的浏览器渲染不出来东西,而且浏览器控制台报错了:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)

你正在使用一个runtime-only(运行版本)的Vue(使用了一个阉割版的Vue)并且这个模板解析器是没有成功获取到的(你正在使用一个运行时的vue你没有模板解析器)。
(1)Either pre-compile the templates into render functions:要么把你需要的模板交给render函数
(2)or use the compiler-included build:或者请你使用编译器包含的版本(引入一个完整版的Vue)

我们去引入第三方库的时候直接写了名字,按住Ctrl+鼠标点击 vue

发现你只引入了vue的文件夹没说具体引入哪个,打开vue的package

vue中的package.json

{
  "_from": "vue@^2.6.11",
  "_id": "vue@2.6.14",
  "_inBundle": false,
  "_integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==",
  "_location": "/vue",
  "_phantomChildren": {},
  "_requested": {
    "type": "range",
    "registry": true,
    "raw": "vue@^2.6.11",
    "name": "vue",
    "escapedName": "vue",
    "rawSpec": "^2.6.11",
    "saveSpec": null,
    "fetchSpec": "^2.6.11"
  },
  "_requiredBy": [
    "/"
  ],
  "_resolved": "https://repo.huaweicloud.com/repository/npm/vue/-/vue-2.6.14.tgz",
  "_shasum": "e51aa5250250d569a3fbad3a8a5a687d6036e235",
  "_spec": "vue@^2.6.11",
  "_where": "I:\\学习笔记\\原生vue(@vue-cli)\\分析脚手架结构\\hello_vue_text",
  "author": {
    "name": "Evan You"
  },
  "bugs": {
    "url": "https://github.com/vuejs/vue/issues"
  },
  "bundleDependencies": false,
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  },
  "deprecated": false,
  "description": "Reactive, component-oriented view layer for modern web interfaces.",
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-jsx": "^7.0.0",
    "@babel/plugin-transform-flow-strip-types": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/register": "^7.0.0",
    "@types/node": "^12.12.0",
    "@types/webpack": "^4.4.22",
    "acorn": "^5.2.1",
    "babel-eslint": "^10.0.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^8.0.4",
    "babel-plugin-istanbul": "^5.1.0",
    "babel-plugin-transform-vue-jsx": "^4.0.1",
    "babel-preset-flow-vue": "^1.0.0",
    "buble": "^0.19.3",
    "chalk": "^2.3.0",
    "chromedriver": "^2.45.0",
    "codecov": "^3.0.0",
    "commitizen": "^2.9.6",
    "conventional-changelog": "^1.1.3",
    "cross-spawn": "^6.0.5",
    "cz-conventional-changelog": "^2.0.0",
    "de-indent": "^1.0.2",
    "es6-promise": "^4.1.0",
    "escodegen": "^1.8.1",
    "eslint": "^5.7.0",
    "eslint-plugin-flowtype": "^2.34.0",
    "eslint-plugin-jasmine": "^2.8.4",
    "file-loader": "^3.0.1",
    "flow-bin": "^0.61.0",
    "hash-sum": "^1.0.2",
    "he": "^1.1.1",
    "http-server": "^0.12.3",
    "jasmine": "^2.99.0",
    "jasmine-core": "^2.99.0",
    "karma": "^3.1.1",
    "karma-chrome-launcher": "^2.1.1",
    "karma-coverage": "^1.1.1",
    "karma-firefox-launcher": "^1.0.1",
    "karma-jasmine": "^1.1.0",
    "karma-mocha-reporter": "^2.2.3",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-safari-launcher": "^1.0.0",
    "karma-sauce-launcher": "^2.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^4.0.0-rc.2",
    "lint-staged": "^8.0.0",
    "lodash": "^4.17.4",
    "lodash.template": "^4.4.0",
    "lodash.uniq": "^4.5.0",
    "lru-cache": "^5.1.1",
    "nightwatch": "^0.9.16",
    "nightwatch-helpers": "^1.2.0",
    "phantomjs-prebuilt": "^2.1.14",
    "puppeteer": "^1.11.0",
    "resolve": "^1.3.3",
    "rollup": "^1.0.0",
    "rollup-plugin-alias": "^1.3.1",
    "rollup-plugin-buble": "^0.19.6",
    "rollup-plugin-commonjs": "^9.2.0",
    "rollup-plugin-flow-no-whitespace": "^1.0.0",
    "rollup-plugin-node-resolve": "^4.0.0",
    "rollup-plugin-replace": "^2.0.0",
    "selenium-server": "^2.53.1",
    "serialize-javascript": "^3.1.0",
    "shelljs": "^0.8.1",
    "terser": "^3.10.2",
    "typescript": "^3.6.4",
    "webpack": "~4.28.4",
    "weex-js-runtime": "^0.23.6",
    "weex-styler": "^0.3.0",
    "yorkie": "^2.0.0"
  },
  "files": [
    "src",
    "dist/*.js",
    "types/*.d.ts"
  ],
  "gitHooks": {
    "pre-commit": "lint-staged",
    "commit-msg": "node scripts/verify-commit-msg.js"
  },
  "homepage": "https://github.com/vuejs/vue#readme",
  "jsdelivr": "dist/vue.js",
  "keywords": [
    "vue"
  ],
  "license": "MIT",
  "lint-staged": {
    "*.js": [
      "eslint --fix",
      "git add"
    ]
  },
  "main": "dist/vue.runtime.common.js",
  "module": "dist/vue.runtime.esm.js",
  "name": "vue",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/vuejs/vue.git"
  },
  "scripts": {
    "bench:ssr": "npm run build:ssr && node benchmarks/ssr/renderToString.js && node benchmarks/ssr/renderToStream.js",
    "build": "node scripts/build.js",
    "build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer",
    "build:weex": "npm run build -- weex",
    "commit": "git-cz",
    "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev",
    "dev:cjs": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-cjs-dev",
    "dev:compiler": "rollup -w -c scripts/config.js --environment TARGET:web-compiler ",
    "dev:esm": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-esm",
    "dev:ssr": "rollup -w -c scripts/config.js --environment TARGET:web-server-renderer",
    "dev:test": "karma start test/unit/karma.dev.config.js",
    "dev:weex": "rollup -w -c scripts/config.js --environment TARGET:weex-framework",
    "dev:weex:compiler": "rollup -w -c scripts/config.js --environment TARGET:weex-compiler ",
    "dev:weex:factory": "rollup -w -c scripts/config.js --environment TARGET:weex-factory",
    "flow": "flow check",
    "lint": "eslint src scripts test",
    "release": "bash scripts/release.sh",
    "release:note": "node scripts/gen-release-note.js",
    "release:weex": "bash scripts/release-weex.sh",
    "sauce": "karma start test/unit/karma.sauce.config.js",
    "test": "npm run lint && flow check && npm run test:types && npm run test:cover && npm run test:e2e -- --env phantomjs && npm run test:ssr && npm run test:weex",
    "test:cover": "karma start test/unit/karma.cover.config.js",
    "test:e2e": "npm run build -- web-full-prod,web-server-basic-renderer && node test/e2e/runner.js",
    "test:sauce": "npm run sauce -- 0 && npm run sauce -- 1 && npm run sauce -- 2",
    "test:ssr": "npm run build:ssr && jasmine JASMINE_CONFIG_PATH=test/ssr/jasmine.js",
    "test:types": "tsc -p ./types/test/tsconfig.json",
    "test:unit": "karma start test/unit/karma.unit.config.js",
    "test:weex": "npm run build:weex && jasmine JASMINE_CONFIG_PATH=test/weex/jasmine.js"
  },
  "sideEffects": false,
  "typings": "types/index.d.ts",
  "unpkg": "dist/vue.js",
  "version": "2.6.14"
}

我们关注的是

"module": "dist/vue.runtime.esm.js",

你通过ES6的模块化引入vue的时候也就是说你自己代码里的import Vue from 'vue'用的就是ES6的模块化语法，引入了vue,引入具体的文件是靠"module"控制的,"module"专门控制ES6模块化引入vue的时候到底引入哪一个.js，引入了vue.runtime.esm.js"这个vue就是残缺版的vue,残缺了模板解析器,这样也就意味着template就没有人给你解析了,怎么修改?打开dist文件夹里面的vue.js才是最原汁原味的vue这个库其他文件都是这个文件的基础上进行改变或精简。

验证是不是vue.runtime.esm.js，在这个文件上面:

console.log(666)

[HMR] Waiting for update signal from WDS...

666

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)

然后恢复原样

第一种:引入完整版的vue

main.js

import Vue from 'vue/dist/vue.js'
Vue.config.productionTip = false

new Vue({
  template:`<h2>你好啊</h2>`
}).$mount('#app')

但是你这么写为什么官方不直接把着写简便的vue还要设计残缺版的vue,所以查看第二种

第二种:就引入残缺版的vue,当你引入的是残缺版的vue,还要写模板,render就出现了

render正常写法

render(){
    console.log('执行了')
}

这个函数是vue帮你调用的，现在里面写一个console.log看看有没有被调用,其实你这样写render不太合法,render得有返回值return,哪怕你写了return null

render(){
    console.log('执行了')
    return null
}

render还能接收到参数

render(a){
    console.log(typeof a)//控制台打印a的类型    
    return null
}

输出:

function

文档里面管这个a叫做createElement:创建元素。所有的活都在它身上；你可以用这个去渲染你的模板

render(createElement){
    createElement('h1','')
    return null
}

createElement()

第一个属性:告诉人家你的元素叫什么名

第二个属性:你的内容

render(createElement){
    createElement('h1','你好啊')
	return null
}

你这里不能直接写h1因为你上下没有h1,你就写'h1'

还是没有，原因是return的原因

返回创建的值就可以了

render(createElement){
	return createElement('h1','你好啊')
}

render是一个函数vue帮你调,在调的时候给你传入createElement,createElement这个可以帮你创建具体的元素，编写具体的内容，这里没有用到this可以写成箭头函数

render: (createElement)=>{
	return createElement('h1','你好啊')
}

render: createElement=>{
	return createElement('h1','你好啊')
}

render: createElement=>createElement('h1','你好啊')

render: q=>q('h1','你好啊')

这里是html,如果用组件;具体的内容都在App里,不加引号读变量,往上一读读到import App from './App.vue'

render: h=>h(App)

这就是render: h=>h(App)的由来

干嘛有这么多vue?

其实我们天天用的这个vue里面包含了俩个东西:

  • 1.就是vue的核心:生命周期、处理事件等等
  • 2.模板解析器
    • 这个模板解析器基本占了vue.js三分之一的体积
    • 如果不整出那些精简版的vue，用最完整的vue就会出现一个问题
      • 你开发的时候没什么问题，但是如果有一天得交给webpack打包,打包完生成了一个特别大的文件夹,里面一定包含vue这个库,核心和模板解析器都在但是模板解析器在这里就不太合适了，我们开发的时候模板解析器应该帮着我们去翻译模板啥的，当你完成了后已经帮你完成了浏览器认识的样式，你再出现模板解析器就其实没什么作用了
vue.runtime.esm.js

runtime:运行时

es:代表es6

m:代表modules

有一个问题就是:比如App.vue

里面有<template></template>这种标签类型的templateVue专门给你找了一个库:

打开package.json找到"vue-template-compiler": "^2.6.11":Vue模板编译器。这个是专门解析.vue文件里面的<template></template>标签

如果你想运行dist/vue.runtime.common.js，但是你因为有export导出所以不能直接运行在浏览器上，你想浏览器运行,得使用vue.runtime.min.js或者vue.runtime.js

vue.common.dev.js
vue.common.js
vue.common.prod.js

所有带common:有俩种模块化:

  • 1.es6
  • 2.common.js

总结

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

版权声明：本文为yasinawolaopo原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。