您的位置：首页 > Web前端 > Vue.js

webpack（8）vue组件化开发的演变过程

2021-07-12 21:31 831 查看

前言

真实项目开发过程中，我们都是使用组件化的去开发

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()
]
}

现在我们打包，就不会报错了，且访问首页有对应的数据

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航