首页 > 网络编程 > JavaScript > javascript类库 > vue.js > html页面引入vue并使用公共组件

.html页面引入vue并使用公共组件方式

2023-01-13 14:15:49 作者：肥喵蒙太奇

这篇文章主要介绍了.html页面引入vue并使用公共组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

.html页面引入vue并使用公共组件

问题描述

整体项目采用传统 .html 文件搭建，vue仅作为渲染数据工具使用，需要使用的地方使用 <script> 标签引入。

现有数个页面，每个页面都包含相同 header 和 footer ，希望可以把 header 和 footer 提取出来，避免太多重复代码。

解决办法

公共部分写在 .js 文件里，本质就是在当前页面中写的公共组件，组件规则遵从vue的组件规则。

template后面可以采用字符串拼接(内容少)，或者是使用 `定义模板字符串。

目录结构

—test

——header.js //公共头部

——index.html //页面

——vue.js

在这里插入图片描述

index.html

<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>test</title>
		<!--引入vue-->
		<script type="text/javascript" src="vue.js"></script>
		<!--引入公共组件-->
		<script type="text/javascript" src="header.js"></script>
	</head>
	<body style="font-size: 30px">
		<div id="vue_app">
			<!--自定义的组件使用-->
			<common-head></common-head>
			<!--页面自有内容-->
			<div style="background: #fba">我是内容</div>
		</div>
		</div>
	<script>
		//vue
		app_all=new Vue({
			el: "#vue_app"
		})
	</script>
	</body>

</html>

header.js

/*Vue.component('common-head',{
	template:'<div>'+
				'<h1>hhhhhhh</h1>' + 
				'<h1>duusdfsjkdfh</h1>' +
			  '</div>'
});*/
Vue.component('common-head',{
	template:`<div style="background: #baf">
				<h1>这是公共组件</h1>
				<h1>公共的头部</h1>
			  </div>`
});

vue公共组件框架搭建

最近在进行组件开发，为了方便组件的引用与维护，准备采用“npm本地文件file引入”的方式将组件从项目中解耦，并使用git进行组件的版本管理与协作开发。

file本地文件引入，会在项目中package.json文件添加依赖，但是不会在node_modules文件夹下安装组件库，组件会直接引用公用组件库中的的文件

步骤详述

1.使用vue init webpack-simple demo-ui 创建Vue组件项目

不使用vue init webpack的原因是，组件开发中webpack安装会有大量依赖是无用的，webpack-simple对于组件来说已经足够了

在这里插入图片描述

2.src新增components文件夹用于存放组件文件

这里新增一个tooltip组件

在这里插入图片描述

3.根目录新增index.js文件，用于导出组件内容

//导出tooltip组件
import demoUI from './src/components/tooltip/tooltip'
if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.component(demoUI.name, demoUI)
}
demoUI.install = function(Vue){
    Vue.component(demoUI.name, demoUI)
}
export default demoUI

4.package.json文件修改

// 权限设置，一定要为false 
private:false 
// 新增字段：main   require方法可以通过这个配置找到入口文件 
main:"./dist/demo-ui.js"

5.webpack.config.js文件修改

var path = require('path')
var webpack = require('webpack')
// 增加NODE_ENV常量，用于判断生产环境还是开发环境
const NODE_ENV = process.env.NODE_ENV
module.exports = {
	//生产环境下进入index.js文件   开发环境进入main.js    方便组件开发看效果
	entry: NODE_ENV == 'development' ? './src/main.js' : './index.js',
	output: {
	    path: path.resolve(__dirname, './dist'),
	    publicPath: '/dist/',
	    filename: 'demo-ui.js',		// 定义输出文件名
	    library: 'demo-ui',			// 定义require时的模块名
	    libraryTarget: 'umd',		// 指定输出格式
	    umdNamedDefine: true		// 对UMD构建过程中的AMD模块进行命名，否则使用匿名的define
	},
  devtool: '#eval-source-map'		//编译时是否生成map文件，不需要map文件，删掉该属性
	//其余配置默认即可
}

6.修改 index.html 文件

// 默认编译文件引入路径
<script src="/dist/build.js"></script>
// 这边编译文件定义为wafa-ui,路径修改为
<script src="/dist/demo-ui.js"></script>

7.配置完毕，webpack编译文件

运行 npm run build 编译文件

/dist/ 文件夹下生成 demo-ui.js 和 demo-ui.map.js 文件

8.其它项目使用该组件

“npm file引入” 安装公用组件库 npm install …/demo-ui ps：wafa-ui需和其它项目在同一级目录下

main.js 文件全局引用组件

// 全局组件引入
import demoUI from "demo-ui"
Vue.use(demoUI)

具体业务中使用

<demoTooltip title=“这里是提示内容”> Tooltip内容 </demoTooltip>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

.html页面引入vue并使用公共组件方式