使用自己开发的qiucode-ui组件库(基于Vue2.x)

笔者个人博客地址 秋码技术分享
qiucode-ui在线文档地址:https://zhenqicai.github.io/qiucodeUI-docs
基于前面几篇的文章,想必大家对Vue-cli安装以及nodejs安装有所了解了吧,那笔者这里就不在叙述了。好了,打开你的cmd窗口。执行以下命令:

vue init webpack demo-vue

使用自己开发的qiucode-ui组件库(基于Vue2.x)_第1张图片
等模板下载好,然后执行以下命令:

cd qiucode-demo
npm run dev

使用自己开发的qiucode-ui组件库(基于Vue2.x)_第2张图片
打开浏览器,出现如下界面,说明成功!虽然这些之前也都有讲过,这里就当是温故知识了!
使用自己开发的qiucode-ui组件库(基于Vue2.x)_第3张图片
笔者现在想要一套界面UI组件,如qiucode-ui,那就执行如下命令:

npm install qiucode-ui --save-dev

在这里插入图片描述
而后在你的入口文件添加如下语句:

import qiucodeUI from 'qiucode-ui' // 引入组件库
import 'qiucode-ui/dist/qiu-style/qiucodeUI.css' // 引入样式库

Vue.use(qiucodeUI)

使用自己开发的qiucode-ui组件库(基于Vue2.x)_第4张图片
qiucodeUI在线文档
使用自己开发的qiucode-ui组件库(基于Vue2.x)_第5张图片
而后在 App.vue文件修改如下:
使用自己开发的qiucode-ui组件库(基于Vue2.x)_第6张图片
再次打开浏览器
使用自己开发的qiucode-ui组件库(基于Vue2.x)_第7张图片
可关注笔者的 微信公众号:
使用自己开发的qiucode-ui组件库(基于Vue2.x)_第8张图片

你可能感兴趣的:(Vuejs)