搭建项目：
可以通过vue-cli3快速搭建项目：（https://cli.vuejs.org/zh/guide/installation.html）
npm install -g @vue/cli
通过vue ui启动图形化界面（图形化搭建项目）
vue ui
项目目录结构调整
｜--- examples // 项目原src目录，改成examples作为示例展示｜--- packages // 新增packages用于存放组件
配置项目以支持新的目录结构
项目的src目录改成examples，导致项目无法运行
新增package目录，该目录未加入webpack编译（cli3提供了一个vue.config.js配置文件，是对项目和webpack的配置）
module.exports = {// 修改 src 目录 为 examples 目录pages: {index: {entry: 'examples/main.js',template: 'public/index.html',filename: 'index.html'}},}module.exports = {// 扩展 webpack 配置，使 packages 加入编译chainWebpack: config => {config.module.rule('js').include.add(__dirname + 'packages').end().use('babel').loader('babel-loader').tap(options => {// 修改它的选项...return options})}}module.exports = {// 修改 src 目录 为 examples 目录pages: {index: {entry: 'examples/main.js',template: 'public/index.html',filename: 'index.html'}},// 扩展 webpack 配置，使 packages 加入编译chainWebpack: config => {config.module.rule('js').include.add(__dirname + 'packages').end().use('babel').loader('babel-loader').tap(options => {// 修改它的选项...return options})}}编写组件
// 导入组件，组件必须声明 nameimport timeLine from './src/index.vue'// 为组件提供 install 安装方法，供按需引入timeLine.install = function (Vue) {Vue.component(timeLine.name, timeLine)}// 默认导出组件export default timeLine// 导入组件import timeLine from "./timeLine"// 存储组件列表const components = [timeLine]// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册const install = function (Vue) {// 判断是否安装if (install.installed) return// 遍历注册全局组件components.map(component => Vue.component(component.name, component))}// 判断是否是直接引入文件if (typeof window !== 'undefined' && window.Vue) {install(window.Vue)}export default {// 导出的对象必须具有 install，才能被 Vue.use() 方法安装install,// 以下是具体的组件列表timeLine}编写示例
// 1、在示例中导入组件库import Vue from 'vue'import App from './App.vue'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI);// 本地// 导入组件库import timeLine from './../packages/index'// 注册组件库Vue.use(timeLine)Vue.config.productionTip = falsenew Vue({render: h => h(App)}).$mount('#app')1231
<template>
<div>
<timeLine
:dicList="dicList"
:timeLineObj="timeLineObj"
:labList="labList"
@addEchart="addEchart"
@changeType="changeType"
@timeChange="timeChange"
></timeLine>
</div>
</template>
<script>
export default {
data () {
return {
dicList:[],
dicDeList:[
{
code: "010005",
createTime: "2020-10-21 13:15:36",
creator: "1",
descCn: "影像报告",
id: 102,
operator: "1",
parentId: 97,
sort: "5",
updateTime: "2020-10-21T05:15:39.000+00:00",
value: "image_report",
cdict: [
{
cdict: null,
code: "010005001",
createTime: "2020-10-21 13:15:36",
creator: "1",
descCn: "影像",
id: 121,
operator: "1",
parentId: 102,
sort: "1",
updateTime: "2020-10-21T05:15:39.000+00:00",
value: "image"
}
]
},
{
code: "010006",
createTime: "2020-10-21 13:15:36",
creator: "1",
descCn: "病理报告",
id: 103,
operator: "1",
parentId: 97,
sort: "6",
updateTime: "2020-10-21T05:15:39.000+00:00",
value: "pathology_report",
cdict: [
{
cdict: null,
code: "010006001",
createTime: "2020-10-21 13:15:36",
creator: "1",
descCn: "病理",
id: 125,
operator: "1",
parentId: 103,
sort: "1",
updateTime: "2020-10-21T05:15:39.000+00:00",
value: "pathology"
}
]
}
],
timeLineObj:{
"2020-09-11": {
"image": {
dateTime: "2020-09-11 02:10:00",
title: "肺部CT"
},
"pathology":{
dateTime: "2020-09-11 02:10:00",
title: '"内镜活检组织"示慢性炎,局灶鳞上皮化生。'
}
}
},
labList:[]
}
},
mounted () {
setTimeout(() => {
this.dicList = this.dicDeList;
}, 2000);
},
components: {
// timeLine: components.timeLine
},
methods: {
addEchart (val) {
console.log(val)
},
changeType (val) {
console.log(val)
},
timeChange (val) {
console.log(val)
}
}
}
</script>
<style scoped>
.container {
margin: 20px 50px;
min-height: 800px;
height: 800px;
}
</style>发布到npm，方便在多个项目中引用
"lib": "vue-cli-service build --target lib --name npm-package-demo --dest lib packages/index.js",
npm run lib
name: 包名，该名字是唯一的。可在 npm 官网搜索名字，如果存在则需换个名字。version: 版本号，每次发布至 npm 需要修改版本号，不能和历史版本号相同。description: 描述。main: 入口文件，该字段需指向我们最终编译后的包文件。keyword：关键字，以空格分离希望用户最终搜索的词。author：作者private：是否私有，需要修改为 false 才能发布到 npmlicense： 开源协议以下为参考设置{“name”: “npm-package-demo”,“version”: “1.0.0”,“description”: “基于 Vue 的组件示例”,“main”: “lib/npm-package-demo.umd.min.js”,“keyword”: “npm-package-demo”,“private”: false}忽略目录examples/packages/public/忽略指定文件vue.config.jsbabel.config.js*.map
如果配置了淘宝镜像，先改回npm镜像：
npm config set registry http://registry.npmjs.org
在终端执行登录命令，输入用户名、密码、邮箱即可登录。
npm login
npm publish
引用npm发布的组件包
全局注册组件，在main.js：
// 引入npm包 import components from "npm-package-demo-hz"; import 'npm-package-demo-hz/lib/timeline.css'; // 使用vue组册组件 Vue.use(components.timeLine)
局部引入组件：
// 引入npm包
import components from "npm-package-demo-hz";
import 'npm-package-demo-hz/lib/timeline.css';
// 局部注册组件
components: {
timeLine: components.timeLine
},
注意：没有引入css会导致样式报错，这里本来想在vue.config.js中配置css的loader的，但是还没有解决，这样就必须引入css的样式文件