一、传统组件的问题和解决方案

1、问题

全局定义的组件必须保证组件的名称不重复；
字符串模板缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \；
不支持 CSS 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏；
没有构建步骤限制，只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器（如：Babel）；

2、解决方案

针对传统组件的问题，Vue 提供了一个解决方案 —— 使用 Vue 单文件组件。

二、Vue 单文件组件的基本用法

单文件组件的组成结构

template 组件的模板区域
script 业务逻辑区域
style 样式区域

<template>
	<div>
		<!-- 这里用于定义vue组件模板内容 -->
	</div>
</template>

<script>
// 这里用于定义Vue组件的业务逻辑
export default {
	// 私有数据
	data() {
		return {};
	},
	// 处理函数
	methods: {}
	// 其他业务逻辑
};
</script>

<style scoped>
/* 这里用于定义组件样式 */
</style>

三、webpack 中配置 vue 组件的加载器

1、运行 `npm i vue-loader vue-template-compiler -D` 命令

vue-loader：^17.0.1
vue-template-compiler：^2.7.14

2、在 webpack.config.js 配置文件中，添加 vue-loader 的配置项如下：

const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
	...
	plugins: [new VueLoaderPlugin()], // plugins 数组是 webpack 打包期间会用到的一些插件列表
	// 所有第三方文件模块的匹配规则
	module: {
		rules: [
			{
				test: /\.vue$/,
				loader: "vue-loader"
			}
		]
	}
};

四、在 webpack 项目中使用 vue

1、运行 `npm i vue -S` 安装 vue

vue：^3.2.45

2、在 src -> index.js 入口文件中，通过 `import Vue from 'vue'` 来导入 vue 构造函数

3、创建 vue 的实例对象，并指定要控制的 el 区域

<div id="app"></div>

4、通过 render 函数渲染 App 根组件

// 1.导入Vue构造函数
import { createApp } from "vue";

// 4.导入App根组件
import App from "./App.vue";

// 2.指定vm实例要控制的页面区域
// 3.通过render函数，把指定的组件渲染到el区域中
createApp(App).mount("#app");

五、webpack 打包发布

上线之前需要通过webpack将应用进行整体打包，可以通过 package.json 文件配置打包命令：

// 在package.json文件中配置 webpack 打包命令
// 该命令默认加载项目根目录中的 webpack.config.js 配置文件
"scripts": {
	// 用于打包的命令
	"build": "webpack"
}

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！