用require.js搭建一个vue项目

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

    
    
  
  



  {{name}}
  

main.js

require.config({
//设置公共文件前缀路径
  baseUrl:"lib",
  paths:{
    //由于element-ui 内部写的 define("ELEMENT",["vue"],xxx)
    //所以它的别名必须叫ELEMENT 也必须有一个叫vue的依赖才能加载
    "ELEMENT":"https://unpkg.com/[email protected]/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: '
component{{age}}
',
    data(){
      return {
        age:20
      }
    }
  });
});

testTwo.js

function hello() {
  alert("hello");
}