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'