webpack（8）vue組件化開發的演變過程
前言
真實項目開發過程中，我們都是使用組件化的去開發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()
]
}
現在我們打包，就不會報錯了，且訪問首頁有對應的數據
