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

上面我们已经将组建抽离出来了,但是templatejs代码还是写在一起,此时我们就需要创建.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-loadervue-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()

]

}

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

以上是 webpack(8)vue组件化开发的演变过程 的全部内容, 来源链接: www.h5w3.com/java/695932.html

回到顶部