【LX 实习】vue 中 export default 和 export

vue 组件的 export default 和 export

(一) Vue 的模块机制

• Vue 是通过 webpack 实现的模块化，因此可以使用 import 来引入模块，例如：

    import IndexPage from './index.vue';
    import Url from '@/mod/util/url/h5/1.0/url.js'

• 此外，你还可以在 bulid/webpack.base.conf.js 文件中修改相关配置：

    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('template')
        }
    }
    //你的模块可以省略 ".js"，".vue"，“.json” 后缀，weebpack 会在之后自动添加上；
    //可以用 "@" 符号代替 "template" 字符串,使引入代码简洁等。 

(二) export 和 export default  

• export 和 export default 用来导出模块，Vue 的单文件组件通常需要导出一个对象，这个对象是 Vue 实例的选项对象，以便于在其它地方可以使用 import 引入。
• 而 new Vue() 相当于一个构造函数，在入口文件 entry.js 构造根组件的同时，如果根组件还包含其它子组件，那么 Vue 会通过引入的选项对象构造其对应的 Vue 实例，最终形成一棵组件树。

    import IndexPage from './index.vue';
    new Vue({
        el: '#app',
        components: { IndexPage },
        template: '<IndexPage/>'
    });

• export 和 export default 的区别：
  • export 可以导出多个命名模块
  • export default 只能导出一个默认模块，这个模块可以匿名

    //demo1.js
    export const str = 'hello world'
    export function f(a){
        return a+1
    }

    //demo2.js
    import { str, f } from 'demo1';

    //demo3.js
    export default {
        a: 'hello',
        b: 'world'      
    }
    
    //demo4.js
    import obj from 'demo3' //引入时可给此模块取任意名字，俄eg:"obj"