webpack中如何使用vue开发

1.安装vue cnpm i vue -S

2.在main.js中导入vue.js

方式一： import Vue from 'vue/dist/vue.js'

方式二：import Vue from 'vue' //主要用法，使用.vue时不需要以下配置
配置webpack.config.js中module.exports的resolve属性

resolve:{
         alias:{
             "vue$":"vue/dist/vue.js"
         }
    }

3.下载vue-loader

cnpm i vue-loader vue-template-compiler -D

4. 在webpack.config.js中配置loader

(1)const VueLoaderPlugin = require('vue-loader/lib/plugin');

(2)plugins:[ //配置VueLoaderPlugin
        new VueLoaderPlugin()
    ],

(3){test:/\.vue$/,use:'vue-loader'},      //配置vue-loader

 

webpack如何调用.vue组件

1.在main.js中导入.vue文件

import login from './login.vue'

3.在webpack.config.js中配置loader

4.必须使用render属性配置vm实例

 render:function(createElements){     //可以简写为render:c=>c(login)

        return createElements(login)

    }

 

export default向外暴露成员

注意: 1.一个模块中export default只能够向外暴露一次

2.export default可以接收任意的变量名

var title = '小星星'

export default title

3.一个模块中可以 同时使用export default和export向外暴露对象

4.在main.js中接收方式

import mm1 from './test.js' //import 任意名称  接收


ES6中导入模块:    import 模块名称 from '模块标识符' 

     导出模块：   使用export default 和 export 向外暴露成员

Node中导入模块:   var 名称 = require('模块标识符')

     导出模块:   使用module.exports 和exports来暴露成员

 

export向外暴露成员

注意: 1.一个模块中export能够向外暴露多次

export var name = 'wzh'

export var age = '25'

2.export不能接收变量名，只能在变量声明时调用

export var name  = 'wzh'

3.在main.js中接收方式

使用{}接收，import名称必须与导出时名称相同！

import  {name} from './test.js'

接收多个时在{}里按,分隔

import  {name,age} from './test.js'