.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 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>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
