webpack（8）vue元件化開發的演變過程

Silent丿丶黑羽發表於2021-07-12
WebVue元件化

前言

真實專案開發過程中，我們都是使用元件化的去開發vue的專案，但是元件化的思想又是如何來的呢？下面就從開始講解演變過程
 

演變過程1.0

一般情況下vue都是單頁面開發，所以專案中只會有一個index.html檔案，而且大多數時候這個html中的內容都是固定死的，之前我們都是把模板程式碼寫在html中，現在我們把模板程式碼抽離出來，寫在js檔案中，模板程式碼只寫入如下程式碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
</div>
<script src="./dist/bundle.js/"></script>
</body>
</html>

我們在js中寫入模板程式碼如下：

import Vue from 'vue'
const app = new Vue({
  el: "#app",
  data: {
    message: "hello",
    name: "jkc"
  },
  methods: {
    btnClick(){
      console.log("test")
    }
  },
  template: `
    <div>
      <h2>{{message}}</h2>
      <button @click="btnClick">按鈕</button>
      <h2>{{name}}</h2>
    </div>
  `,
})

上面的template模板中的程式碼vue內部會自動替換掉html程式碼中的div標籤中的內容，所以我們打包以後，頁面展示的都是template中的內容

這裡我們其實還可以再進階以下，改成以下程式碼

import Vue from 'vue'

const App = {
  template: `
    <div>
      <h2>{{message}}</h2>
      <button @click="btnClick">按鈕</button>
      <h2>{{name}}</h2>
    </div>
  `,
  data(){
    return{
      message: "hello",
      name: "jkc"
    }
  },
  methods: {
    btnClick(){
      console.log("test")
    }
  },
}

const app = new Vue({
  el: "#app",
  template: `<App></App>`,
  components: {
    App
  }
})

上面程式碼做的事情：將之前放在父元件中程式碼，建立一個App物件，然後在父元件中註冊，最後在模板中引用該元件，同樣我們打包後在頁面檢視的效果與之前是一樣的
 

演變過程2.0

上面我們發現main.js中寫的App這個物件程式碼太多了，在main.js檔案中如果有多個，那樣會顯得很臃腫，所以我們可以把這個物件抽離出來，放在一個單獨的js檔案中，我們在專案的src資料夾中建立一個vue資料夾，在它下面建立一個app.js檔案，將之前main.js中的App物件的程式碼複製到裡面，然後匯出

// app.js
export default {
  template: `
    <div>
      <h2>{{message}}</h2>
      <button @click="btnClick">按鈕</button>
      <h2>{{name}}</h2>
    </div>
  `,
  data(){
    return{
      message: "hello",
      name: "jkc"
    }
  },
  methods: {
    btnClick(){
      console.log("test")
    }
  },
}

然後在main.js中從app.js中匯入App

import App from './vue/app'

最後在打包，頁面展示的效果還是一樣，但是我們把元件抽離了出來，只是這裡是js檔案的形式
 

演變過程3.0

上面我們已經將組建抽離出來了，但是template和js程式碼還是寫在一起，此時我們就需要建立.vue字尾的檔案了，檔案中會自動幫我們把template模板程式碼、js程式碼和css程式碼分離開來，讓結構更加清晰

在Vue資料夾中建立App.vue檔案，寫入如下程式碼

<template>
  <div>
    <h2>{{message}}</h2>
    <button @click="btnClick">按鈕</button>
    <h2>{{name}}</h2>
  </div>
</template>

<script>
export default {
  name: "App",
  data(){
    return{
      message: "hello",
      name: "jkc"
    }
  },
  methods: {
    btnClick(){
      console.log("test")
    }
  },
}
</script>

<style scoped>

</style>

然後在main.js檔案中匯入剛剛建立的Vue檔案

import App from "./vue/App";

此時我們打包是會報錯的，因為我們專案中用到了.vue的元件，所以必須安裝vue-loader和vue-template-compiler

安裝命令如下：

npm install -D vue-loader vue-template-compiler

這樣是預設安裝最新版本的"vue-loader": "^16.3.0"和"vue-template-compiler": "^2.6.14",

大坑來襲
這裡的坑，博主花了2個小時才採完，太坑了。
注意1：vue-template-compiler的版本一定要與vue的版一致
注意2：最新版本16.3打包會報錯，我們安裝時需要手動安裝15.9.7或者15.0.0都可以，博主親測可以

安裝完成以後，我們需要在webpack中的rules中配置vue

{
  test: /\.vue$/,
  loader: 'vue-loader'
}

又因為我們的vue-loader是15以上的版本，所以必須在你的 webpack 配置中新增 Vue Loader 的外掛

const { VueLoaderPlugin } = require('vue-loader')
plugins: [
    // 請確保引入這個外掛！
    new VueLoaderPlugin()
]

最後展示完整的webpack配置如下

const { VueLoaderPlugin } = require('vue-loader')
const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: "dist/"
  },
  resolve: {
    extensions: ['.json', '.js', '.vue', '.css'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
    },
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        test: /\.png/,
        type: 'asset'
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ],
  },
  plugins: [
    // 請確保引入這個外掛！
    new VueLoaderPlugin()
  ]
}

現在我們打包，就不會報錯了，且訪問首頁有對應的資料

相關文章