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()
]
}
现在我们打包，就不会报错了，且访问首页有对应的数据
webpack（8）vue组件化开发的演变过程的更多相关文章
- 二、vue组件化开发（轻松入门vue）
轻松入门vue系列 Vue组件化开发 五.组件化开发 1. 组件注册 组件命名规范 组件注册注意事项 全局组件注册 局部组件注册 2. Vue调试工具下载 3. 组件间数据交互 父组件向子组件传值 p ...
- vue组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...
- Vue组件化开发
Vue的组件化 组件化是Vue的精髓,Vue就是由一个一个的组件构成的.Vue的组件化设计到的内容又非常多,当在面试时,被问到:谈一下你对Vue组件化的理解.这时候又有可能无从下手,因此在这里阐释一下 ...
- day69:Vue:组件化开发&Vue-Router&Vue-client
目录 组件化开发 1.什么是组件? 2.局部组件 3.全局组件 4.父组件向子组件传值 5.子组件往父组件传值 6.平行组件传值 Vue-Router的使用 Vue自动化工具:Vue-Client 组 ...
- Vue 组件化开发
组件化开发 基本概念 在最开始的时候,已经大概的聊了聊Vue是单页面开发,用户总是在一个页面上进行操作,看到的不同内容也是由不同组件构成的. 通过用户的操作,Vue将会向用户展示某些组件,也会隐藏某些 ...
- Vue 组件化开发之插槽
插槽的作用 相信看过前一篇组件化开发后,你对组件化开发有了新的认识. 插槽是干什么的呢?它其实是配合组件一起使用的,让一个组件能够更加的灵活多变,如下图所示,你可以将组件当作一块电脑主板,将插槽当作主 ...
- 06Vue.js快速入门-Vue组件化开发
组件其实就是一个拥有样式.动画.js逻辑.HTML结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue的组件和也做的非常彻底,而且有自己的特色.尤其是她 ...
- Vue 组件化开发的思想体现
现实中的组件化思想化思想体现 标准(同一的标准) 分治(多人同时开发) 重用(重复利用) 组合(可以组合使用) 编程中的组件化思想 组件化规范:Web Components 我们希望尽可能多的重用代码 ...
- vue组件化开发-vuex状态管理库
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 ...
随机推荐
- docker部署harbor私有镜像库（3）
一.harbor介绍 在实际生产运维中,往往需要把镜像发布到几十.上百台或更多的节点上.这时单台Docker主机上镜像已无法满足,项目越来越多,镜像就越来越多,都放到一台Docker主机上是不行的,我 ...
- python基础之流程控制（if判断和while、for循环）
程序执行有三种方式:顺序执行.选择执行.循环执行 一.if条件判断 1.语句 (1)简单的 if 语句 (2)if-else 语句 (3)if-elif-else 结构 (4)使用多个 elif 代码 ...
- mysql基础之数据库备份和恢复的基础知识
备份数据的最终目的是为了在出现一些意外情况时,能够通过备份将数据还原,所以单单的备份数据往往是无法满足还原时的需求的,所以在备份数据库时,除了要备份数据本身,还要备份相关的数据库环境,如配置文件,定时 ...
- 在Go语言项目中使用Zap日志库
在Go语言项目中使用Zap日志库 本文先介绍了Go语言原生的日志库的使用,然后详细介绍了非常流行的Uber开源的zap日志库,同时介绍了如何搭配Lumberjack实现日志的切割和归档. 在Go语言项 ...
- Waymo的自主进化
Waymo的自主进化 3月初,Waymo在推特上宣布,共获得了22.5亿美元(约合人民币156亿元)融资,由Silver Lake(银湖资本).Canada Pension Plan Investme ...
- 目标检测中特征融合技术（YOLO v4）（上）
目标检测中特征融合技术(YOLO v4)(上) 论文链接:https://arxiv.org/abs/1612.03144 Feature Pyramid Networks for Object De ...
- 【NX二次开发】三点画圆，三角形外心，已知三点求圆心
已知P1.P2.P3,求点O 算法:三点不在一条直线上时,通过连接任意两点,作中垂线.任意两条中垂线的交点是圆心.
- Webflux请求处理流程
spring mvc处理流程 在了解SpringMvc的请求流程源码之后,理解WebFlux就容易的多,毕竟WebFlux处理流程是模仿Servlet另起炉灶的. 下面是spring mvc的请求处理 ...
- 合宙Luat | 电源设计——模块应用必看的2个要点
在模块应用设计中,电源设计是很重要的一部分. 由于射频发射时,会在短时间有一个较大电流的突发脉冲.在突发脉冲阶段内,电源必须能够提供高的峰值电流,不然有可能会引起供电电压的跌落. 而很多初学的朋友 ...
- 题解 P5318 【【深基18.例3】查找文献】
题目传送门 根据本蒟蒻细致粗略的分析 这明显是一道水题模(du)板(liu)题 可我竟然没有一遍AC; 为更好地食用本题解需要了解以下内容 1.dfs(大法师深搜) 2.bfs(冰法师广搜)/dij最 ...