當(dāng)前位置：首頁(yè) > 前端技术 > vue >内容正文

vue

web前端dya07--ES6高级语法的转化rendervue与webpackexport

發(fā)布時(shí)間：2023/12/20 vue 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 web前端dya07--ES6高级语法的转化rendervue与webpackexport 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

js處理類(lèi)語(yǔ)法

webppack無(wú)法處理一些ES6的高級(jí)語(yǔ)法，需要babel來(lái)處理，比如類(lèi).

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是一個(gè)方法，調(diào)用它能夠吧指定的組件模板，渲染為html結(jié)構(gòu)return createElements(login)//注意：這里return的結(jié)果會(huì)替換頁(yè)面中el指定的哪個(gè)容器}});</script> </body></html>

最大不同就是會(huì)將原來(lái)的容器替換掉

在webpack中使用vue開(kāi)發(fā)

直接

import Vue from 'vue'

是不行的
引用的是閹割版的vue，無(wú)法向平常那樣寫(xiě)vue代碼

回顧：包的尋找

解決

1.直接引用

import Vue from '../node_module/vue/dist/vue.js'

2.修改vue中package的main屬性

改為dist/vue.js

還是用

import Vue from '../node_module/vue/dist/vue.js'

但是修改webpack.config.json文件配置

類(lèi)似于重定向。

如果想要用閹割版的vue.js，咋辦呢？

here

1.創(chuàng)建一個(gè).vue文件

2.在main.js中import

但是這時(shí)候，webpack是無(wú)法處理打包.vue文件的。需要安裝loader

安裝loader

此外在webpack.config.json文件中添加對(duì)應(yīng)的loader規(guī)則

注意：此時(shí)需要用render渲染組件

總結(jié)：

export default&export

export default

test.js, 暴露

var info={name:"asd",age:"12" } export default info

main.js

import m from './test.js' console.log(m)

export
test.js 暴露

export var title='小星星' export var content='123'

main.js 導(dǎo)入

import m,{title,ciontent} from './test.js'

按需導(dǎo)出，括號(hào)里的對(duì)象，需要多少導(dǎo)出多少。

引用時(shí)，名稱(chēng)改變

總結(jié)

總結(jié)

以上是生活随笔為你收集整理的web前端dya07--ES6高级语法的转化rendervue与webpackexport的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。