web前端dya07--ES6高级语法的转化rendervue与webpackexport
生活随笔
收集整理的這篇文章主要介紹了
web前端dya07--ES6高级语法的转化rendervue与webpackexport
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
js處理類語法
webppack無法處理一些ES6的高級語法，需要babel來處理，比如類.
1.裝包
2.配置正則
3.配置.babelrc文件
render渲染組件
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head><body><div id="app"></div><script>var login={template:"<h3>login</h3>"}var vm=new Vue({el:'#app',data:{},methods:{},render:function(createElements){//createElement是一個方法，調(diào)用它能夠吧指定的組件模板，渲染為html結(jié)構(gòu)return createElements(login)//注意：這里return的結(jié)果會替換頁面中el指定的哪個容器}});</script> </body></html>最大不同就是會將原來的容器替換掉
在webpack中使用vue開發(fā)
直接
import Vue from 'vue'是不行的
引用的是閹割版的vue，無法向平常那樣寫vue代碼
回顧：包的尋找
解決
1.直接引用
import Vue from '../node_module/vue/dist/vue.js'2.修改vue中package的main屬性
改為dist/vue.js
但是修改webpack.config.json文件配置
類似于重定向。
如果想要用閹割版的vue.js，咋辦呢？
here
1.創(chuàng)建一個.vue文件
2.在main.js中import
但是這時候，webpack是無法處理打包.vue文件的。需要安裝loader
此外在webpack.config.json文件中添加對應(yīng)的loader規(guī)則
注意：此時需要用render渲染組件
總結(jié)：
export default&export
export default
test.js, 暴露
var info={name:"asd",age:"12" } export default infomain.js
import m from './test.js' console.log(m)export
test.js 暴露
main.js 導(dǎo)入
import m,{title,ciontent} from './test.js'按需導(dǎo)出，括號里的對象，需要多少導(dǎo)出多少。
引用時，名稱改變
總結(jié)
總結(jié)
以上是生活随笔為你收集整理的web前端dya07--ES6高级语法的转化rendervue与webpackexport的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 互联网金融风控面试算法知识(一)
- 下一篇： h5滚动隐藏滚动条_vue.js-div