一、骨架搭建
1.1 项目初始化
使用vue-cli3初始化项目，vue create dy-ui,安装如下图所示依赖，版本选择2.x。 初始化完成后，删除不必要的文件夹。修改目录如下：
. ├── src │ ├── packages │ │ ├── button (组件文件夹) │ │ └── index.ts （组件注册入口） │ ├── styles (通用样式文件夹) │ ├── types (声明文件) │ ├── App.vue │ ├── main.ts ├── test │ ├── unit │ │ ├── button.spec.js (按钮测试文件)
根目录结构：
网络异常，图片无法展示
|
1.2 安装依赖资源
此项目所需依赖
"@babel/polyfill": "^7.11.5", "babel-loader": "^8.1.0", "core-js": "^3.6.5", "karma": "^5.2.3", "karma-chai": "^0.1.0", "karma-chrome-launcher": "^3.1.0", "karma-mocha": "^2.0.1", "karma-sourcemap-loader": "^0.3.8", "karma-spec-reporter": "^0.0.32", "karma-webpack": "^4.0.2", "mocha": "^8.1.3", "sass-resources-loader": "^2.1.1", "vue": "^2.6.11", "vue-class-component": "^7.2.3", "vue-property-decorator": "^8.4.2" 复制代码
1.3 引入scss全局变量
在vue.config.js文件中，引入scss全局变量。
module.exports = { chainWebpack: config => { config .entry('index') .add('@babel/polyfill') .end(); const scssRes = config.module.rule('scss').oneOfs.store; scssRes.forEach(item => { item .use("sass-resource-loader") .loader('sass-resources-loader') .options({ resources: './src/styles/_var.scss' }).end(); }) }, }
_var.scss文件中写入所需样式的全局变量。
二、搭建按钮组件
2.1 编写组件
以按钮组件为例，可到element官网上查看按钮组件所需要传入的参数。
2.2 注册组件
在src文件夹下index.ts，注册组件。
import DyButton from './button/button/Button.vue'; const install = (Vue: any) => { Vue.component(DyButton.name, DyButton); } export default { install, };
除了以组件形式引入，还有可能会通过script标签的方式引入。全局直接通过script 引用的方式会默认调用install.
if (typeof window !== 'undefined' && (window as any).Vue) { install((window as any).Vue); }
2.3 使用组件
在main.ts文件中，引入组件的入口文件，并使用。
import dyUi from './packages/index'; Vue.use(dyUi);
三、测试按钮组件
在unit文件夹下，新建button.spec.js测试文件。在package.json文件的script中添加测试执行语句。"test": "karma start",。 按需引入所需文件依赖，使用chai断言测试按钮功能是否成立。
import { shallowMount } from '@vue/test-utils'; // vue提供的快速测试的方法 import { expect } from 'chai'; import Button from '@/packages/button/button/Button.vue'; it('测试button能否正常显示', () => { // 测试当前组件运行在浏览器的情况 const wrapper = shallowMount(Button, { slots: { default: 'dy-ui' } }); expect(wrapper.text()).to.eq('dy-ui'); });
运行yarn run test即可。
四、npm发布组件
打包文件：
"lib": "vue-cli-service build --target lib --name dying-ui ./src/packages/index.ts"
在此，需要注意的是打包路径是否正确。 之后，在npm官网上注册一个账号。在需要发布的项目中登录自己的npm账号。
网络异常，图片无法展示
|
登录成功后，将package.json文件中的private改为false，便可以发布npm包。若更新，则需要确认版本号不同，才可发布。
npm publish // 发布命令
点击查看源码。
作者：ClyingDeng
链接：https://juejin.cn/post/6888117281079951373
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
