前言
真實專案開發過程中，我們都是使用元件化的去開發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()
]
}
現在我們打包，就不會報錯了，且訪問首頁有對應的資料