数据大屏项目一：项目组件框架搭建以及本地组件利用npm调试

概要：本篇文字主要记录，开发数据大屏项目的第一步。搭建通用组件库，以及在本地如何通过npm link对通用组件库和项目进行调试开发。

搭建自己的数据大屏项目

项目选型： vue3 sass svg 运行命令

vue create vue3-component-demo

然后按照提示安装vue3的项目，不需要选择typescript。成功后 运行

cd vue3-component-demo
npm run serve

打开 localhost:8080则出现下面的界面表示项目新建成功！

通过rollup搭建vue组件库

新建组件库文件夹my-datav-lib，初始化项目，并安装依赖

npm init -y

安装相关依赖： babel负责将es6转换为es5 plugin-vue以及@vue/compiler-sfc负责转换vue文件，resolve负责将引用外部的组件打包到自己的组件中，commonjs负责翻译commonjs规范的模块化语法，terser负责将打包出来的组件库文件代码压缩，postcss，sass负责样式的翻译。json负责json文件的识别。

npm i @babel/core @babel/node @babel/plugin-transform-runtime @babel/preset-env rollup-plugin-babel -D
npm i @vue/compiler-sfc rollup-plugin-vue rollup -D
npm i @vue/eslint-config eslint -D
npm i rollup-plugin-commonjs rollup-plugin-json  rollup-plugin-node-resolve  rollup-plugin-terser  -D
npm i sass autoprefixer rollup-plugin-postcss rollup-plugin-css-only -D

配置rollup的配置文件，项目根目录下新建rollup.dev.config.js

主要配置的是入口，出口路径以及文件名称，以及打包输出的模块化格式，和相关的插件，vue当做一个外部库引用，通过属性external实现。

const path = require('path');
const inputPath = path.resolve(__dirname, './src/index.js');
const outputumd = path.resolve(__dirname, './dist/datav.lib.umd.js');
const outputcjs = path.resolve(__dirname, './dist/datav.lib.cjs.js');
const outputes = path.resolve(__dirname, './dist/datav.lib.es.js');
const vue = require('rollup-plugin-vue');
const resolve = require('rollup-plugin-node-resolve');
const json = require('rollup-plugin-json');
const babel = require('rollup-plugin-babel');
const commonjs = require('rollup-plugin-commonjs');
const css = require('rollup-plugin-css-only');
const postcss = require('rollup-plugin-postcss');


module.exports = {
	input: inputPath,
	output: [
		{
			file: outputumd,
			name: 'zsqDataLib',
			format: 'umd',
			globals: { vue: 'Vue' }
		},
		{
			file: outputcjs,
			name: 'zsqDataLib',
			format: 'cjs',
			globals: { vue: 'Vue' }
		},
		{
			file: outputes,
			name: 'zsqDataLib',
			format: 'es',
			globals: { vue: 'Vue' }
		},
	],
	plugins: [
		resolve(),
		vue(),
		css(),
		postcss({
			// modules: true,
			plugins: [
				require('autoprefixer')({ overrideBrowserslist: ['> 0.15% in CN'] }) // 自动添加css前缀
			]      
		}),
		json(),
		babel(),
		commonjs(),
	],
	external: ['vue'],
};

修改package.json

修改打包命令，添加dev打包命令，以及修改main的入口配置，这个属性是当他作为组件引用到别的项目中时候，项目就是通过main来找到组件的主要库文件的。modules配置的是es模块输入文件，files表示的是当组件发布到npm中的时候包含的文件清单。

    "scripts": {
        "dev": "rollup -c rollup.dev.config.js",
        "build": "rollup -wc rollup.dev.config.js",
    },
    "modules": "dist/datav.lib.es.js",
    "files": [
        "dist",
        "src"
    ],

新建一个简单的vue组件

src\component\Test\index.js

import Test from './Test.vue';

export default function(Vue) {
	Vue.component(Test.name, Test);
}

src\component\Test\Test.vue

<template>
  <div class="msg">
    {{msg}}
  </div>
</template>
<script>
export default {
	name: 'TestComponent',
	setup() {
		const msg = 'Hello my first Vue component!';
		return { msg };
	},
};
</script>
<style lang="scss" scoped>
  .msg {
    color: red;
  }
</style>

src\index.js

import Test from './component/Test/index';
export default function(Vue){
	Vue.use(Test);
}

运行命令打包，并且运行命令建立一个可引用的本地库连接

在项目的根目录下运行下面命令 npm link会将当前的组件库在全局创建一个连接，这个连接就是package.json中name属性对应的名称

npm run dev
npm link

并且在c盘地址中key看到链接

在项目中引用rollup搭建好的组件库进行本地调试

进入到最开始新建的vue3项目中，cd vue3-component-demo，在项目的package.json中加入依赖项： "datav-base-lib": "1.0.0", 在项目中运行

npm link datav-base-lib(组件库创建链接的名称，也是组件库package.json中对应的name的名称)

则表示通过npm link成功了！ 然后再在项目的main.js中引入 在App.vue中写下组件库的引用 重新启动 npm run serve 可以看到页面出现的效果： 表示组件库成功引入！