webpack與vue結合使用

例1：在webpack使用web

安裝vue

`cnpm i vue -S

在index.html使用插件表達式來訪問vue實例中的數據

<div id="app">
    {{msg}}
    <login></login>
  </div>
複製代碼

在main.js引入vue構造函數和建立實例

import Vue from 'vue'              
var login = {
  template: '<h3>這是登陸組件</h3>'
}
var vm = new Vue({
  el: '#app',
  data: {
    msg: '123'
  },
  methods: {},
  components: {
    login
  }
})
複製代碼

結果

頁面不顯示數據，且有錯誤提醒

緣由是在webpack中，使用import Vue from 'vue'導入的vue構造函數，功能不完整，只能提供runtime-only的方式。 即import vue from vue加載vue包的入口文件是vue.runtime.common.js

包查找規則：
項目根目錄中有沒有node_modules的文件夾，
在node_modules中根據包名，找到對應的vue文件，
在vue文件夾中，找package.json的包配置文件，
在package.json中，查找一個main屬性（main屬性指定了一個包在加載時的入口文件）
複製代碼

解決方式

• 在vue的package.json包配置文件,把main屬性改成"main": "dist/vue.js"(不推薦)
• 修改路徑import Vue from 'vue/dist/vue.js'
• 配置webpack.config.js

import Vue from 'vue' 在main.js中這裏不變

resolve: {
  alias:{ //修改vue導入時候，包的路徑
    // "vue$": "vue/dist/vue.js"
  }
}
複製代碼

整個項目列表

例2：在webpck渲染組件

• 在webpack使用vue，在runtime-only 方式的狀況下，頁面中渲染一個組件（.vue），vue的實例的render函數能夠實現
• 在index.html文件中

<div id="app"></div>
複製代碼

• 在main.js文件中

import Vue from 'vue'
import login from './login.vue'
var vm = new Vue({
  el: '#app',
  data: {
    msg: '123'
  },
  methods: {},
  // components: {
  //   login
  // }
  // render: function (createElements){ 
  //  return createElements(login)
  // }
  render: c => c(login)
})
複製代碼

• 在src目錄下建立一個login.vue文件

<template>
  <div>
    <h1>這是登陸組件，使用 .vue 文件定義出來的 --- {{msg}}</h1>
  </div>
</template>

<script>
export default {
  data() {
    // 注意：組件中的 data 必須是 function
    return {
      msg: "123"
    };
  },
  methods: {
    show() {
      console.log("調用了 login.vue 中的 show 方法");
    }
  }
};
</script>

<style>

</style>
複製代碼

• webpack沒法打包.vue文件，需安裝相關的loader，並在webpack.config.js中進行相關配置

cnpm i vue-loader vue-template-compiler -D
複製代碼

var VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    plugins: [  //配置插件
        new VueLoaderPlugin()
    ],
    module: {  //配置loader
        rules: [
            { test: /\.vue$/, use: 'vue-loader' }
        ]
    }
}
複製代碼

• 結果以下

例3 在webpack使用vue-router(在例2基礎上)

• 安裝vue-router cnpm i vue-router -D
• main.js

import Vue from 'vue'
import app from './App.vue'

import VueRouter from 'vue-router'
Vue.use(VueRouter)
import account from './Account.vue'
import goodslist from './GoodsList.vue'
var router = new VueRouter({
  routes: [ //路由規則
    { path: '/account', component: account },
    { path: '/goodslist', component: goodslist }
  ]
})

var vm = new Vue({
  el: '#app',
  render: c => c(app),
  router //掛載路由
})
複製代碼

• Account.vue

<template>
  <div>
    <h1>這是一個account組件</h1>
  </div>
</template>

<script>
export default {
  
}
</script>

<style lang="scss" scoped>
//普通style標籤只支持css樣式，要啓動scss或less，要設置style元素的lang屬性
 body{
   html{
     font-style: italic
   }
 }
</style>
複製代碼

• GoodsList

<template>
  <div>
    <h1>這是一個goodslist組件</h1>
  </div>
</template>

<script>
export default {
  
}
</script>

<style scoped>
  div{
    color: red;
  }
</style>
複製代碼

• 結果

例4：在webpack vue 實現路由嵌套（在例3基礎上）