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

2024-10-07 13:35:01

.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>

总结

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

Vue加载组件、动态加载组件的几种方式

什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 下面一段简单的代码给大家介绍Vue加载组件的几种方式,具体代码如下所示: //正常加载 import index from '../pages/index.vue' import view from '../pages/view.vue' //懒加载 const i
vue实现自定义公共组件及提取公共的方法

目录自定义公共组件及提取公共的方法 vue自定义公共组件 vue 提取公共的方法 vue定义公用方法自定义公共组件及提取公共的方法 vue自定义公共组件我们在编写页面的时候,会存在公共的组件,比如头部和底部菜单我们拿公共头部为例子,想在每个页面都显示公共头部的实现方式有两种: 在src/components目录创建目录 common, 再创建header.vue header.vue <template> <div> <h1>header in here
Vue一次性简洁明了引入所有公共组件的方法

使用场景 -在开发过程中,往往会有很多自己定义公用组件,我们通过import 导入,components挂载到实例上就行,项目刚开始还好,但是随着项目迭代,组件越来越多,同一个组件不同的方式用需要重复导入挂载,就显得冗余这里是通过require.context的一种便捷操作实例文件结构 component/modal里存放的是我们定义的公共DOM组件 // 导入Vue, 需要使用Vue.component()方法注册组件 import Vue from 'vue' // let f = r
.html页面引入vue并使用公共组件方式

目录 .html页面引入vue并使用公共组件问题描述解决办法目录结构 vue公共组件框架搭建步骤详述总结 .html页面引入vue并使用公共组件问题描述整体项目采用传统 .html 文件搭建,vue仅作为渲染数据工具使用,需要使用的地方使用 <script> 标签引入. 现有数个页面,每个页面都包含相同 header 和 footer ,希望可以把 header 和 footer 提取出来,避免太多重复代码. 解决办法公共部分写在 .js 文件里,本质就是在当前页面中写的公共组
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听

业务场景重现现在我的App.vue里面有一个头部的公共组件,头部组件里有一个输入框,当我输入词条时,将词条传进App.vue里的<router-view>里的.vue页面,并进行查询获取数据解决思路如下: 1.如何拿到头部的词条 2.当词条改变时如何触发.vue里的请求数据事件解决方案我是用vuex数据仓库来存储词条的,当词条改变时,修改数据仓库里的词条然后在.vue页面里监听这个词条,当词条改变时触发请求数据的事件代码数据仓库store.js import Vue from '
vue如何使用vue slot封装公共组件

目录使用vue slot封装公共组件使用slot插槽封装使用vue slot封装公共组件公用子组件:publicSlot <div> <div class="top"> <h1 class="title">{{title}}</h1> <slot name="headerRight"> 可以根据你slot nam
vue install 注册全局组件方式

目录 vue install注册全局组件 1.首先先建立一个公用的组件 2.新建一个install.js文件 3.在main.js文件中注册 4.在页面中使用 vue插件的install方法 vue install注册全局组件项目中的有些组件使用的频率比较高,这时候我们可以注册全局的组件,这样就不用每次使用的组件的时候一次次的导入具体使用的步骤如下一般会把这个常用的组件在main.js文件中注册好 1.首先先建立一个公用的组件 // Cmponent.vue 公用的组件 <template
解决vue项目中某一页面不想引用公共组件app.vue的问题

Vue 单页面应用把公共组件放在 app.vue 但是我希望某个页面没有这些公共组件怎么办(比如登陆页面)每个页面都有导航栏但是我希望登陆页面只有一个背景色和一个登陆框没有导航栏那应该怎样设置呢? vue中文文档:点击进入在根组件中:在导航栏使用v-show判断当前路由是否是不需要的组件来完成页面: <template> <div id="app"> <home-header v-show="!(path ==='/') "
vue elementui 实现搜索栏公共组件封装的实例代码

1.背景 vue后台管理系统,会有很多表格页面,表格上方会有一些搜索选项,表格直接使用el-table即可,而搜索栏区域每次写起来都很繁琐,而且多人开发情况下每个人写的样式都不相同,布局样式无法统一. 所以要考虑对搜索栏做一个封装,统一配置引用,提升开发维护效率和界面统一. 完成后的效果大概就是长这样: 2.分析项目使用的是elementui框架,搜索栏这种表单提交,首先要使用el-form组件来封装,而复杂点就是表单项可能有很多种,例如input输入框.select选择框.日期时间选择框.日
vue中封装echarts公共组件过程

目录 1.安装echarts 2.在mian.js中全局引入 3.下面开始封装图表 4.接下来只需要在需要显示图表的地方引入Echart.vue 定义图表公共样式是为了统一同一网站各页面图表的基础样式baseOption.js(轴线.区域.色系.字体),统一封装后页面需要直接引入,传入所需参即可覆盖基础样式. 以下示例封装图表组件Echart.vue. 1.安装echarts npm install echarts --save npm install lodash --save // 若已安装
详解webpack 多页面/入口支持&公共组件单独打包

webpack系列目录 webpack 系列二:webpack 介绍&安装 webpack 系列三:webpack 如何集成第三方js库 webpack 系列四:webpack 多页面支持 & 公共组件单独打包 webpack 系列五:webpack Loaders 模块加载器 webpack 系列六:前端项目模板-webpack+gulp实现自动构建部署基于webpack搭建纯静态页面型前端工程解决方案模板, 最终形态源码见github: https://github.com

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

目录