自建vue組件 air-ui (4) -- air-ui 環境搭建和目錄結構

時間 2020-01-21

標籤自建 vue 組件 air 環境搭建目錄結構简体版

原文原文鏈接

前言

前面花了兩個篇幅來詳細分析了一下 element-ui 這個項目：css

終於進入到 air-ui 的篇幅了。其實前面已經說過，在組件邏輯方面 和 css 方面，element-ui 作的很好，我也挑不出大毛病，並且它們也不是我要重寫 ui 組件的主要緣由。air-ui 主要仍是如下幾個方面跟 element-ui 有比較大的差別，也主要是以這些方面來寫文章：html

目錄結構
文檔方面
構建方面
主題定製
多語言方面以及在整個過程當中，遇到的一些坑

本節主要講 air-ui 環境搭建和目錄結構。前端

基於 vue-cli 的搭建

若是說如今最流行的 vue 項目的腳手架是什麼，毫無疑問是 vue-cli, 因此 vue-cli 初始化的項目的目錄結構也是最廣泛的，也是最好理解的，由於受衆最多。咱們不少 vue 項目剛開始都是基於 vue-cli 來搭建， air-ui 做爲一個 vue 項目，顯然也是這麼幹的。 (事實上，element-ui 的目錄結構爲啥那麼奇葩，我猜可能也是早期 vue-cli 不夠普及的緣由，由於早期那時候都是自建的 vue 項目)vue

初始化項目

搭建腳手架的指令：webpack

npm install -g vue-cli
vue init webpack projectName
cd projectName
npm install
npm run dev
複製代碼

固然這邊的 projectName 就是 air-ui。這樣子一個簡單的基於 vue-cli 的 vue 項目就搭建起來了。固然 air-ui 是用 yarn 安裝的，因此具體的指令是這樣子的：git

npm install -g vue-cli
vue init webpack air-ui
cd air-ui
yarn
yarn dev
複製代碼

建立項目的時候，一路默認選項就好了。只不過安裝依賴的時候，用 yarn 安裝就好了。最後本地測試跑起來就能夠了：web

air-ui 用的 vue-cli 版本是 3.0.1vue-router

F:\code\air-ui>vue --version
3.0.1
複製代碼

webpack 的版本

默認搭載的是 webpack 3.X 版本，從 package.json 和 yarn.lock 來看，當前具體的 webpack 版本是 3.12.0, 說明vue-cli 3.x 搭載的 webpack 並無升級到 webpack 4.x 版本。(這一點跟 element-ui 不太同樣，element-ui 從 2.4.11 以後的版本，他們就將 webpack 升級到了 4.x 版本了, 固然這個只涉及到打包效率和速度，後面徹底能夠手動將其升級到 4.x 版本)vue-cli

vue 的版本

package.json 和 yarn.lock 來看, vue-cli 3.x 搭載的 vue 確定也不是最新的 vue 3.x, 具體的版本是 2.6.11。如今最新的 vue 3.x 也出來了，後面也是能夠手動將其升級到 vue 3.x 的。npm

air-ui 的完整目錄對比

初始化的用 vue-cli 搭建的項目的目錄結構以下：

| air-ui
| --- build/ 打包邏輯
| --- | --- build.js
| --- | --- check-version.js
| --- | --- logo.png
| --- | --- utils.js
| --- | --- vue-loader.conf.js
| --- | --- webpack.base.conf.js
| --- | --- webpack.dev.conf.js
| --- | --- webpack.prod.conf.js
| --- config/ 打包邏輯配置文件
| --- | --- dev.env.js
| --- | --- index.js
| --- | --- prod.env.js
| --- | --- test.env.js
| --- src/ 業務邏輯
| --- | --- assets/ 存放靜態資源
| --- | --- | --- logo.png
| --- | --- components/ 存放組件文件
| --- | --- | --- HelloWorld.vue
| --- | --- router/ 路由文件
| --- | --- | --- index.js
| --- | --- App.vue vue 入口模板
| --- | --- main.js 入口js文件
| --- static/ 存放前端靜態資源，默認爲空
| --- test/ 單元測試文件
| --- .babelrc babel 配置文件
| --- .eslintignore eslint 的忽略配置文件
| --- .eslintrc.js eslint 的配置文件
| --- .postcssrc.js postcss 的配置文件
| --- index.html 項目首頁入口
| --- package.json 打包入口文件
| --- README.md readme 文件
| --- yarn.lock yarn lock 文件

接下來是完整的 air-ui 最後的目錄結構：

| air-ui
| --- build/ 打包邏輯
| --- | --- build.js
| --- | --- check-version.js
| --- | --- git-release.sh pub發佈的腳本
| --- | --- logo.png
| --- | --- utils.js
| --- | --- vue-loader.conf.js
| --- | --- webpack.base.conf.js
| --- | --- webpack.common.js 打common組件包的任務
| --- | --- webpack.component.js 打單個組件的任務
| --- | --- webpack.dev.conf.js
| --- | --- webpack.prod.conf.js
| --- config/ 打包邏輯配置文件
| --- | --- dev.env.js
| --- | --- index.js
| --- | --- prod.env.js
| --- | --- test.env.js
| --- docs/ 文檔
| --- lib/ 打組件包的 dist 目錄
| --- src/ 業務邏輯
| --- | --- assets/ 存放靜態資源
| --- | --- | --- logo.png
| --- | --- components/ 存放組件文件
| --- | --- | --- ~~~HelloWorld.vue~~~
| --- | --- | --- button/ 具體的組件
| --- | --- | --- xxxxx/ 如下省略 N 個組件目錄
| --- | --- directives/ 自定義的指令
| --- | --- lang/ 多語言文件夾
| --- | --- locale/ 多語言邏輯相關目錄
| --- | --- mixins/ 共用 mix 方法
| --- | --- router/ 路由文件
| --- | --- | --- index.js
| --- | --- styles/ 存放 sass 樣式文件
| --- | --- theme/ 存放 theme 文件
| --- | --- transitions/ 存放 transitions 組件的文件
| --- | --- utils/ 存放公共方法文件
| --- | --- views/ 存放開發環境的模板文件
| --- | --- App.vue vue 入口模板
| --- | --- main.js 入口js文件
| --- static/ 存放前端靜態資源，默認爲空
| --- test/ 單元測試文件
| --- .babelrc babel 配置文件
| --- .eslintignore eslint 的忽略配置文件
| --- .eslintrc.js eslint 的配置文件
| --- .postcssrc.js postcss 的配置文件
| --- components.json 組件的json文件
| --- gulpfile.js gulp 打包文件
| --- index.html 項目首頁入口
| --- package.json 打包入口文件
| --- README.md readme 文件
| --- yarn.lock yarn lock 文件

能夠看到 air-ui 就是基於 vue-cli 項目的初始目錄結構的。只不過在這個基礎上多了一些新的目錄擴展，就是以上紅色標出來的目錄結構：

build 目錄增長了打包組件和發佈的相關腳本和任務
增長了 docs 用來存放文檔和demo例子相關
lib 就是打包組件後的 dist 目錄，跟 element-ui 打包 dist 同樣
components 目錄仍是隻存放組件相關的，固然以前默認的 HelloWorld.vue 就刪掉了
src 下的 directives,locale, mixins, transitions, utils 跟 element-ui 的 src 的那幾個目錄是同樣的做用
src 下的 lang 就是多語言詞條文件的目錄，跟element-ui 的 src/locale/lang 的這個目錄性質同樣，只不過咱們抽到了 src 下目錄，其實這樣是有好處的，後面咱們講到多語言機制的時候，會說道爲啥要這麼作。
src 下的 styles 就是存放 sass 樣式文件，這個目錄下的子目錄結構，跟 element-ui 的 packages/theme-chalk/src 的目錄結構同樣，是借鑑過來的，同樣有子目錄 common, date-picker, fonts, mixins，還有各個組件的對應的 sass 文件。
src 下的 theme 存放主題的一些配置文件，後面講到主題的時候會講到，這個目錄也是 element-ui 沒有的。
src 下的 views 存放本地開發環境下的模板文件，至關於以前的 HelloWorld.vue
根目錄下的 components.json 跟 element-ui 根目錄下的 components.json 文件是同樣的，都是一些須要單獨再打包的組件的列表
gulpfile.js 就是 gulp 配置文件，air-ui 的構建包含了不少 gulp 任務，這一點跟 element-ui 還不太同樣。

改爲新的目錄結構跑起來

改爲新的目錄結構以後，接下來同樣本地跑起來，yarn dev, 構建方式仍是同樣，不須要調整，不過由於 vue-router 那邊有調整。以前在 src/router/index.js 首頁展現是去讀取 src/components/HelloWorld.vue 這個文件的:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})
複製代碼

如今這個文件以及不存在了。換成是 src/views/home.vue 這個文件了。因此代碼要改爲這樣子:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: (resolve) => {
        require(['@/views/home'], resolve)
      }
    }
  ]
})
複製代碼

這樣子就能夠了。若是要修改首頁的內容，直接修改 src/views/home.vue 就好了，好比改爲這樣子:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: `AIR-UI  -  基於vue2.x，可複用UI組件`
    }
  }
}
</script>
複製代碼

那麼首頁就是