專案參考文章：從零開始搭建vue元件庫 vv-ui
專案的初衷是學習怎麼封裝乙個基於vue的ui元件庫，順便記錄每個步驟，以及在此過程中遇到的難點及體會。
下面是我個人的乙個專案搭建流程，希望能幫助大家。
使用 vue cli 3.0.0版本以上，在node或cmd中輸入以下命令建立專案
vue create project-name
選擇 manually select features
選擇babel，router，vuex，css pre-processors，unit testing
選擇sass/scss(with node-sass)
選擇mocha + chai
選擇in dedicated config files
以上來安裝（按需選擇）
執行如下命令：
cd project-namenpm run serve
看專案是否成功啟動，啟動成功恭喜你完成第一小步~
src目錄修改為examples，用來元件示例
在examples目錄下，新建docs資料夾，用來編寫各元件的文件
在專案下新增packages資料夾，用來存放封裝的元件
const path = require("path");
module.exports =
},chainwebpack: config => ,
}
執行npm run serve 檢視是否能成功啟動
接下來，就是要封裝第乙個元件，由於此文件的重點不是講解元件怎麼封裝，那我們就先寫乙個簡單的元件用來測試好了。
編寫元件前，我先去了解了一下css命名規範bem。
看了幾篇關於bem的文章後，還是比較模糊，實踐出真知，在以後的元件封裝中，我會慢慢去使用這種規範。
在packages下封裝乙個test元件
在packages下新建乙個資料夾test，test目錄下新建index.js檔案以及src/test.vue，如下：
在packages/test/src/test.vue中
在packages/test/index.js中
import zmtest from './src/test.vue'// 支援按需引用
zmtest.install = function (vue) ;
export default zmtest;
在packages下新建index.js
在packages/index.js中
import zmtest from './test/index'const components = [
zmtest
];const install = function (vue) ;
if (typeof window.vue !== "undefined" && window.vue)
export default
在examples下引用示例
在examples/main.js中
// do something...import zmui from '../packages/index'
vue.use(zmui);
// do something...
在examples/views/home.vue中引用test元件
啟動程式後，在"http://localhost:8080/#/home"可以看到我們封裝的test元件能正常使用了~
小白對md的寫法一竅不通...所以先去了解了md檔案的常見語法，參考文章：如何寫md格式的文件。
此過程分為兩步，第一步使.md檔案正常展示，可以看到執行結果以及**展示，第二步封裝乙個**展示的元件，使起可以展開收起，高亮顯示。
編寫文件
在examples/docs下新建乙個test.md檔案，隨意寫點介紹，內容如下：
# 測試元件測試元件是用來測試md文件是否能在專案中像vue檔案一樣正常展示**執行結果
執行結果如下
**如下
``
安裝工具
對md檔案需要乙個編譯工具--vue-markdown-loader
在本專案下，用命令列工具執行以下命令
npm run vue-markdown-loader -d
修改配置檔案
修改vue.config.js，使md檔案能像vue檔案一樣在專案裡展示
// do something...module.exports = ,
// do something...
}
新增路由
在router.js裡新增測試文件的路由
// do something...export default new router(,,]
})
檢視結果
重新啟動程式（注意，只要修改了vue.config.js檔案，程式都需要重新啟動），開啟"http://localhost:8080/#/test"可以看到文字**展示以及乙個小紅點在閃爍，代表第一步完美結束~
封裝**展示元件
開始第二步。
以上，我們完成了md檔案的正常展示，但是我們可以將**展示做得更好，封裝乙個**展示的元件，使示例**可以展開收起，**高亮等。
感興趣的可以了解一下markdown-it。
我還在了解中，以後會更新上。
參考文章：
專案已經完成一小半了，我已經迫不及待將它傳到github上記錄下來。
在本地我能直觀地看到我的專案成果了，現在希望能在github上有個演示位址，讓別人也能直觀地看到我的專案展示。通過github文件及相關資料搜尋，我找到了解決方案。如下：
安裝工具
在專案下安裝gh-pages工具
npm install gh-pages -d
增加部署命令
package.json檔案修改scripts命令
"scripts": ,
修改配置
vue.config.js需要修改publicpath配置
module.exports =
打包部署
在node或cmd執行以下命令
npm run deploy
看到"published"恭喜你部署成功，接下來可以到github上檢視你的專案，是否多了乙個分支gh-pages
在github上修改專案設定
在github你的專案下，找到"settings"下的"github pages", "source"選擇"gh-pages branch"儲存成功後，就擁有演示位址了~~
以上，未完待續...
基於 Hexo Github 搭建自己的部落格
sudo apt install nodejs git npm 安裝版本檢視 node version git version npm versionsudo npminstall hexo cli g 檢視安裝的版本 hexo versionhexo init blog 本地檢驗 cd blog ...
基於Vue的Electron專案搭建
demo 專案名稱 electron vue webpack配置檔案 build.js 生產環境構建 dev client.js 熱載入相關 dev runner.js 開發環境啟動入口 webpack.main.config.js 主程序配置檔案 webpack.renderer.config.j...
Nutui 移動端輕量級Vue元件庫自己上手操作
跟著官文走了下還是採坑了，應該是自己的問題，記錄下來這個實踐過程 nutui 是一套京東風格的移動端元件庫，開發和服務於移動web介面的企業級前中後台產品。雖然是基於京東的業務累計生成的ui庫，但是由於移動端的視覺規範和互動效果大體類似，且這個元件庫可以很好地做到按需引入，並不會引起資源浪費。目前，...