vue 中使用模块化

vue 模块化

js模块

//main.js
//默认导出 {default : function}

 export default function (a, b) {
     return a + b;
 }

// 具名导出 （普通导出） {double:function}

 export function double(a) {
     return a * 2;
 }

//{n:3}
 export var n = 3;
 
//1. 默认的导入方式
import * as m1 from "./src/m1.js"
//2. 结构赋值形式
import {school,teach} from './src/m1.js'
import {school as school2,teach} from './src/m1.js' //重名的as加别名
import {default as m1} from './src/m1.js'

//index.js
import Vue from "./main.js";  //导入main.js中带export default
import {double} from "./main.js"	//导入指定的main.js中方法

componets组件 userinfo.js

// 模板
var template=`
    <div>
        <p>姓名 ：{{name}}</p>
        <p>年龄 ：{{age}}</p>
    </div>
`
export default{
    props:["name","age"],	//约束传回的参数
    // 可以自已写值 也可以接受传回来的值
    // data(){
    //     return{
    //         name:'小明',
    //         age:18
    //     }
    // },
    template,	//模板
}

app.js

// 导入组件userinfo.js
import UserInfo from "./componets/userinfo.js"

var template=`<div id="#app">
    <h2>{{title}}</h2>
    //使用组件
    <UserInfo v-for="(item, i) in user" :key="item.id" :name="item.name" :age="item.age" />
</div>`;

export default{
	//注册组件
    components:{
        UserInfo,
    },
    data(){
        return {
            title:"adasdsad",
            user:[
                {id:1,name:'AA',age:18},
                {id:2,name:'BB',age:18}
            ],
        }
    },
    template,
    
}

index.js

// 导入index.js
import App from "./app.js"
new Vue({
	//render: h => h(App),
    render(res){
        return res(App);
    }
}).$mount("#app")
// 

// 导入js
<script src="js/vue.min.js"></script>
<script src="js/index.js" type="module" ></script>	//type="module"是把js模块化，所以一定要加上

输出结果