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是一个方法,调用它能够吧指定的组件模板,渲染为html结构
return createElements(login)
//注意:这里return的结果会替换页面中el指定的哪个容器
}
});
</script>
</body>
</html>
最大不同就是会将原来的容器替换掉
在webpack中使用vue开发
直接
import Vue from 'vue'
是不行的
引用的是阉割版的vue,无法向平常那样写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文件配置
类似于重定向。
如果想要用阉割版的vue.js,咋办呢?
here
1.创建一个.vue文件
2.在main.js中import
但是这时候,webpack是无法处理打包.vue文件的。需要安装loader
- 安装loader
此外在webpack.config.json文件中添加对应的loader规则
注意:此时需要用render渲染组件
总结:
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'
按需导出,括号里的对象,需要多少导出多少。
引用时,名称改变
总结