教你自己創建一個Vue的UI元件庫類似Element

這篇文章帶給大家的內容是關於教你自己創建一個Vue的UI元件庫類似Element ，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

前言

隨著前端的三大框架的出現,組件化的思想越來越流行,出現許多組件庫.它能夠幫助開發者節省時間提高效率,
如React的Ant-design,Vue的iView,Element等,它們的功能已經很完善了.
我寫這遍文章的目的:記錄自己搭建UI庫的過程(對Vue的理解加深了好多)示範地址
先講一下思路:
平常寫元件時,寫一個元件要用時直接導入就行了,如你寫了一個time.vue,用的時候

import time from '路径'

現在要寫一個元件庫,是不是把所有元件一個資料夾裡(如button.vue,icon.vue,input.vue. ..),透過Vue.components註冊所有元件,再透過Vue.use()安裝一下就實現了,這就是所以的vue插件的想法,沒有那麼神秘

1.環境準備

前面說要把所有的元件放在一個資料夾裡,最簡單就是用鷹架搭一個專案目錄結構,
同時還需要新增範例文件----方便調試和展示:
按鈕的範例效果

##現在要考慮比較重要的兩點:目錄結構

和

範例文件
1.目錄結構 直接用vue-cli建立項目結構, 在基礎上修改一下就行了(以滿足我們範例的展示)
目錄結構

.
├── build  -------------------------webpack相关配置文件
│   ├── build.js
│   ├── check-versions.js
│   ├── logo.png
│   ├── strip-tags.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js -------配置markdown设置时会用到它
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config  ------------------------vue的基本配置
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── examples -----------------------放置例子
│   ├── App.vue --------------------根文件
│   ├── assets ---------------------静态资源
│   │   ├── css --------------------css
│   │   ├── img --------------------图片
│   │   └── logo.png ---------------vue的logo
│   ├── components -----------------公共组件
│   │   ├── demo-block.vue ---------盒子组件
│   │   ├── footer.vue -------------footer组件
│   │   ├── header.vue -------------header组件
│   │   └── side-nav.vue -----------侧边栏组件
│   ├── docs -----------------------例子模块的文档
│   │   ├── breadcrumb.md ----------面包屑组件文档
│   │   ├── button.md --------------按钮组件文档
│   │   ├── card.md ----------------卡片组件文档
│   │   ├── guide.md ---------------简介文档
│   │   ├── icon.md ----------------图标文档
│   │   ├── install.md -------------安装文档
│   │   ├── layout.md --------------布局文档
│   │   ├── logs.md ----------------更新日志文档
│   │   ├── message.md -------------消息文档
│   │   ├── start.md ---------------快速开始1文档
│   │   ├── tag.md -----------------标签文档
│   │   └── twotable.md ------------二维表格文档
│   ├── icon.json ------------------图标数据
│   ├── main.js --------------------入口文件
│   ├── nav.config.json ------------侧边栏数据
│   └── router ---------------------路由
│       └── index.js ---------------路由配置
├── packages -----------------------组件库源代码
│   ├── README.md ------------------README
│   ├── breadcrumb -----------------面包屑源码
│   │   ├── index.js
│   │   └── src
│   ├── breadcrumb-item ------------面包屑源码
│   │   └── index.js
│   ├── button ---------------------按钮源码
│   │   ├── index.js
│   │   └── src
│   ├── card -----------------------卡片源码
│   │   ├── index.js
│   │   └── src
│   ├── col ------------------------列布局源码
│   │   ├── index.js
│   │   └── src
│   ├── message --------------------消息源码
│   │   ├── index.js
│   │   └── src
│   ├── two-dimensional-table -----二维表格源码
│   │    ├── index.js
│   │    └── src
│   ├── row -----------------------行源码
│   │   ├── index.js
│   │   └── src
│   ├── tag -----------------------标签源码
│   │   ├── index.js
│   │   └── src
│   ├── theme-default --------------样式表
│   │   └── lib
│   ├── package.json
│   └── index.js -------------------组件库入口
├── index.html ---------------------主页
├── package.json
├── static
└── README.md

以上是已經修改過的目錄結構,將腳手架產生的src目錄改為examples用來放範例文件,所以對應的你要修改build目錄下的webpack.base.conf.js ,讓它指向examples,webpack才能正確進行打包

範例文件,寫文件使用markdown最適合了,要讓vue能夠實作markdown文件可以用vue-markdown-loader,設定相關文件在webpack.base.conf.js 的rules裡加

#就可以開始寫文件,測試一下

{
  path: '/hello',
  name: 'hello',
  component: r => require.ensure([], () => r(require('../docs/hello.md')))          
}

npm run dev 跑項目開啟http://localhost:8080/#/hello,  可以顯示,初步成功(基本實作)

接下來就要實現範例文件的效果:

既能示範又有程式碼展示(

如下圖)

#如上圖的範例文件是button.md, 要讓它在button.md一個文件裡想顯示代碼的地方顯示代碼,想顯示按鈕的地方顯示按鈕,所以就要在顯示按鈕的地方打上一個標識符, 讓編譯過程中能夠辨識,安裝.vue的方式編譯展示還是要用到markdown的配置,它其實封裝了markdown-it,支援options選項,只要加上定義的標識符(我用的是'demo'),options 選項的配置(也在webpack.base.conf.js 裡)

const vueMarkdown = {
  preprocess: (MarkdownIt, source) => {
    MarkdownIt.renderer.rules.table_open = function () {
      return '

'     }     MarkdownIt.renderer.rules.fence = utils.wrapCustomClass(MarkdownIt.renderer.rules.fence)     const code_inline = MarkdownIt.renderer.rules.code_inline     MarkdownIt.renderer.rules.code_inline = function (...args) {       args[0][args[1]].attrJoin('class', 'code_inline')       return code_inline(...args)     }     return source   },   use: [     [MarkdownItContainer, 'demo', {       // 用于校验包含demo的代码块       validate: params => params.trim().match(/^demo\s*(.*)$/),       render: function (tokens, idx) {         var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);         if (tokens[idx].nesting === 1) {           var desc = tokens[idx + 2].content;           // 编译成html           const html = utils.convertHtml(striptags(tokens[idx + 1].content, 'script'))           // 移除描述，防止被添加到代码块           tokens[idx + 2].children = [];           return `                         

${html}

                        

`;         }         return '

\n';       }     }]   ] }

其實這就是把要當解析器遇到帶demo的標識符時就會添加我們準備好的demo-block元件,依照上述規則解析成AST(抽象語法樹),再把它編譯成html

所以寫範例文件時,可以這樣寫

2.如何寫元件原始碼

其實沒有想像中那麼難,就像平常寫元件那樣,只不過要按照一定結構寫(具體的可以去看我的github),一般的UI元件庫都支援全域引入和單一元件引入,全域引入:

const install = function(Vue) {
  if(install.installed) return
  components.map(component => Vue.component(component.name, component))
}

遍歷你寫的元件,透過Vue.component註冊到Vue上,構成一個install函數,暴露install,當你的別的項目要用時只要安裝一下包,用Vue.use()使用(像別的插件一樣)

單個文件引入:

export default {
  install,
  JButton,
  JCol,
  JRow,
  JTag,
  JBreadcrumb,
  JBreadcrumbItem,
  JCard,
  towTable
}

類似的只要暴露出組件就OK了

1. 別人要能夠透過npm安裝包用我們的包,我們是不是要在包裡寫所以組件和样式,別人只要npm安裝包和引入一個全部組件的樣式兩步驟就可以使用了

2. 3. npm發佈你的UI框架

#你要擁有一個npm帳號(沒有的直接去官網註冊一個)

######開啟終端登入npm#########

npm login

###3.發布套件###我們只有發布packages這個資料夾就行,寫好packages資料夾下個的package.json###

{
  "name": "jk-ui",
  "version": "1.0.9",
  "description": "UI base on Vue",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://git@github.com/liuyangjike/JKUI.git"
  },
  "keywords": [
    "UI"
  ],
  "author": "Jike",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/liuyangjike/JKUI/issues"
  },
  "homepage": "https://github.com/liuyangjike/JKUI#readme"
}

使用npm publish发布就OK了,别人就可以用npm install jk-ui --save愉快的玩耍了

相关推荐：

Vue.js状态管理模式Vuex的安装与使用（代码示例）

Vue如何添加element UI的组件

以上是教你自己創建一個Vue的UI元件庫類似Element的詳細內容。更多資訊請關注PHP中文網其他相關文章！