前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export

js处理类语法 webppack无法处理一些ES6的高级语法,需要babel来处理,比如类.
1.装包
前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
文章图片

2.配置正则
前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
文章图片

3.配置.babelrc文件
前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
文章图片

前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
文章图片

render渲染组件

Document - 锐客网

最大不同就是会将原来的容器替换掉
在webpack中使用vue开发 直接
import Vue from 'vue'

是不行的
引用的是阉割版的vue,无法向平常那样写vue代码
回顾:包的寻找
前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
文章图片

解决
1.直接引用
import Vue from '../node_module/vue/dist/vue.js'

【前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export】2.修改vue中package的main属性
前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
文章图片

改为dist/vue.js
  1. 还是用
import Vue from '../node_module/vue/dist/vue.js'

但是修改webpack.config.json文件配置
前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
文章图片

类似于重定向。
如果想要用阉割版的vue.js,咋办呢?
here
1.创建一个.vue文件
前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
文章图片

2.在main.js中import
前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
文章图片

但是这时候,webpack是无法处理打包.vue文件的。需要安装loader
  1. 安装loader
    前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
    文章图片

    此外在webpack.config.json文件中添加对应的loader规则
注意:此时需要用render渲染组件
前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
文章图片

前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
文章图片

总结:
前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
文章图片

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 导入
import m,{title,ciontent} from './test.js'

按需导出,括号里的对象,需要多少导出多少。
引用时,名称改变
前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
文章图片

总结
前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
文章图片

    推荐阅读