第一集: 從零開始實現一套pc端vue的ui組件庫(環境的搭建)

第一集: 從零開始實現(環境的搭建)

工程定位:
本套工程, 定位在pc端針對vue的ui組件庫

名字的由來
cc是我從2015年養到如今的一直大金毛, 是個人吉祥物!

緣由:
本人上一份工做參與了大型的保險公司後臺管理系統的搭建, 對vue的pc端ui框架有過必定的瞭解, 感覺到了他們真的很強大同時也存在少量的不足, 其實從3月份開始就想寫一套本身的ui框架, 可是無奈遇上996工做制與項目上線還有其餘的事情干擾, 拖到如今才正式開始這個工程, 本工程大部分是受到了element-ui的啓發, 經過閱讀element的源碼使我受益不淺!

目的:
經過編寫本套組件, 不斷的細化本身的知識體系, 掃除知識盲區, 創建良好的面向接口的思想(也就是一切爲使用者着想), 與此同時想要認識更多的朋友, 你們一塊兒學習一塊兒進步, 一塊兒實現夢想!

第一步:
搭建vue的工程這個環節也沒什麼好說的, 須要提的幾點是:

• 1.我採用的css預處理器爲sass.
• 2.項目中沒有使用路由功能.
• 3.測試選用的是vue官方推薦的jest測試運行器

• 4.本工程採用模板與樣式分離的形式

  ① src/style-----------樣式
  ② src/components------具體的組件
  ③ src/assets----------公共的js文件
  ③ test----------------測試

第二步
如今有了一個乾淨的工程, 咱們的目的是把這個工程打包成組件, 這個過程固然與咱們平時打包工程的過程有所不一樣了, 我也是看了幾篇相關的文章才明白它的套路, 總感受官方說的不詳細, 推薦一篇文章講的很好 建立本身的vue-ui組件庫

第三步
若是你已經看了第二步推薦的文章, 相信你很快就能搭建一個最最簡易的組件開發環境了, 我這裏介紹一下umd文件, vue 的lib 模式組件的開發, 打包出的umd文件是一套兼容文件, 它會檢測當前環境的模式是什麼, 而後進行相應的導出, 好比 node規範 與es6規範, 因此這個umd是將各類規範轉換成統一的規範的模式. 這個第三步 我是又創建了一套工程, 用於引用當前工程, 其實就是個人技術博客的官網lulu技術博客, 這樣就能保證時時刻刻模擬使用者, 還能把博客完善哈哈哈哈哈😏.

第四步
爲了讓工程調試更方面, 咱們不得不使用一個神通常的命令, npm link, 這個命令能夠把你開發的包存入本地的包管理文件夾, 至關於你 -g安裝的包, 厲害的地方就是他能夠實時的更新包, 讓咱們調試起來如絲般順滑🍫,npm link的用法簡述 我作到這裏的時候遇到了錯誤, 具體什麼樣的報錯我想不起來了, 大體意思是模式不對語法解析出錯, 只需在 babel.config,js 文件裏面加上下面的內容:

module.exports = {
  presets: [
    '@vue/app'
  ],
  // 容許兩種編碼引入方式共存,也就是common規範與es6規範的共存處理
  sourceType: 'unambiguous'
}

多說一句, 若是切換了項目工程, 可是替換本地包的時候出錯了, 不用去查各類刪除包,更新包的命令, 直接去文件夾把它物理消滅就ok了, 還不會有殘餘數據引發bug.

最後
本篇文章主要是基本環境的搭建, 具體代碼當時作的有點快也就沒上傳, 很差意思了😅,搭建環境的工程也是能學到不少有用的知識的, 若是你也想作一套本身的ui庫,就先沉下心來把基礎環境搞好, 固然咱們也能夠隨時交流互相學習,如今剛剛作完三個基本的組件, 從中學到了大量的知識, 受益不淺啊,每一個版本的代碼都會上傳github與 npm 官網也會實時更新, 毫不半途而廢😁,下一篇文章正式開始代碼之旅~~滴滴學生卡.
github:具體地址
我的博客: 連接描述