用require.js搭建一个vue项目
2017-12-25 本文已影响363人
Vijay_
require.js常用方法
- require(...) 用于主文件,(主文件需要在script标签上定义data-main="主文件地址")
- require(['module1',...],function(module1,...){ //... })，加载导入模块后执行回调函数
require.config({
baseUrl:"依赖文件存放根目录",
paths:{
"别名":"地址",
"别名":"http地址"
},
//导入非amd规范js文件
shim:{
"模块名":{
//依赖模块
deps:[],
//导出的函数或者变量
exports:"func/ivar"
}
}
})
- //定义依赖,依赖加载完后执行函数,然后将函数返回值导出
define([module1,...],function(module1,...){
return {xxx:xxx}
})
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="./require.js" async="async" defer data-main="main.js"></script>
</head>
<body>
<div id="app">
{{name}}
<cmp></cmp>
</div>
</body>
</html>
main.js
require.config({
//设置公共文件前缀路径
baseUrl:"lib",
paths:{
//由于element-ui 内部写的 define("ELEMENT",["vue"],xxx)
//所以它的别名必须叫ELEMENT 也必须有一个叫vue的依赖才能加载
"ELEMENT":"https://unpkg.com/element-ui@2.0.9/lib/index"
},
shim:{
"testTwo":{
//依赖
deps:[],
//导出某个方法或者变量
exports:"hello"
}
}
});
require(['vue','component','ELEMENT','testTwo'], function (Vue, cmp, ELEMENT, hello) {
//从testTwo中导出的方法
hello();
Vue.use(ELEMENT);
new Vue({
el: "#app",
data() {
return {
name: "vijay"
}
},
created(){
this.$message("hello");
console.log(this.getName());
},
methods:{
getName(){
return "vijay"
}
},
components:{
cmp
}
})
});
component.js
define(['vue'],function (Vue) {
return Vue.component('cmp',{
template: '<div>component{{age}}</div>',
data(){
return {
age:20
}
}
});
});
testTwo.js
function hello() {
alert("hello");
}
