自建vue组件 air-ui (4) -- air-ui 环境搭建和目录结构

前言

前面花了两个篇幅来详细分析了一下 element-ui 这个项目:

终于进入到 air-ui 的篇幅了。其实前面已经说过,在组件逻辑方面css 方面element-ui 做的很好,我也挑不出大毛病,而且它们也不是我要重写 ui 组件的主要原因。air-ui 主要还是以下几个方面跟 element-ui 有比较大的差异,也主要是以这些方面来写文章:

  1. 目录结构
  2. 文档方面
  3. 构建方面
  4. 主题定制
  5. 多语言方面以及在整个过程中,遇到的一些坑

本节主要讲 air-ui 环境搭建和目录结构。

基于 vue-cli 的搭建

如果说现在最流行的 vue 项目的脚手架是什么,毫无疑问是 vue-cli, 所以 vue-cli 初始化的项目的目录结构也是最普遍的,也是最好理解的,因为受众最多。我们很多 vue 项目刚开始都是基于 vue-cli 来搭建, air-ui 作为一个 vue 项目,显然也是这么干的。 (事实上,element-ui 的目录结构为啥那么奇葩,我猜可能也是早期 vue-cli 不够普及的原因,因为早期那时候都是自建的 vue 项目)

初始化项目

搭建脚手架的指令:

1
2
3
4
5
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 安装的,所以具体的指令是这样子的:

1
2
3
4
5
npm install -g vue-cli
vue init webpack air-ui
cd air-ui
yarn
yarn dev

创建项目的时候,一路默认选项就行了。只不过安装依赖的时候,用 yarn 安装就行了。 最后本地测试跑起来就可以了:

1

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

1
2
F:\code\air-ui>vue --version
3.0.1

webpack 的版本

默认搭载的是 webpack 3.X 版本,从 package.jsonyarn.lock 来看, 当前具体的 webpack 版本是 3.12.0, 说明vue-cli 3.x 搭载的 webpack 并没有升级到 webpack 4.x 版本。(这一点跟 element-ui 不太一样,element-ui2.4.11 之后的版本,他们就将 webpack 升级到了 4.x 版本了, 当然这个只涉及到打包效率和速度,后面完全可以手动将其升级到 4.x 版本)

vue 的版本

package.jsonyarn.lock 来看, vue-cli 3.x 搭载的 vue 肯定也不是最新的 vue 3.x, 具体的版本是 2.6.11。 现在最新的 vue 3.x 也出来了,后面也是可以手动将其升级到 vue 3.x 的。

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 项目的初始目录结构的。 只不过在这个基础上多了一些新的目录扩展,就是以上 红色标出来的目录结构:

  1. build 目录增加了打包组件和发布的相关脚本和任务
  2. 增加了 docs 用来存放文档和demo例子相关
  3. lib 就是打包组件后的 dist 目录,跟 element-ui 打包 dist 一样
  4. components 目录还是只存放组件相关的,当然之前默认的 HelloWorld.vue 就删掉了
  5. src 下的 directives,locale, mixins, transitions, utilselement-uisrc 的那几个目录是一样的作用
  6. src 下的 lang 就是多语言词条文件的目录,跟element-uisrc/locale/lang 的这个目录性质一样,只不过我们抽到了 src 下目录,其实这样是有好处的,后面我们讲到多语言机制的时候,会说道为啥要这么做。
  7. src 下的 styles 就是存放 sass 样式文件,这个目录下的子目录结构,跟 element-uipackages/theme-chalk/src 的目录结构一样,是借鉴过来的,一样有子目录 common, date-picker, fonts, mixins, 还有各个组件的对应的 sass 文件。
  8. src 下的 theme 存放主题的一些配置文件,后面讲到主题的时候会讲到,这个目录也是 element-ui 没有的。
  9. src 下的 views 存放本地开发环境下的模板文件,相当于之前的 HelloWorld.vue
  10. 根目录下的 components.jsonelement-ui 根目录下的 components.json 文件是一样的,都是一些需要单独再打包的组件的列表
  11. gulpfile.js 就是 gulp 配置文件,air-ui 的构建包含了很多 gulp 任务,这一点跟 element-ui 还不太一样。

改成新的目录结构跑起来

改成新的目录结构之后,接下来一样本地跑起来,yarn dev, 构建方式还是一样,不需要调整,不过因为 vue-router 那边有调整。
之前在 src/router/index.js 首页展示是去读取 src/components/HelloWorld.vue 这个文件的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 这个文件了。所以代码要改成这样子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 就行了,比如改成这样子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>

<script>
export default {
data () {
return {
msg: `AIR-UI - 基于vue2.x,可复用UI组件`
}
}
}
</script>

那么首页就是

1

当然要是觉得 logo 太显眼,要换或者去掉,直接去 App.vue 把他干掉。

总结

本节主要是讲怎么基于 vue-cli 来搭建 air-ui 的项目雏形。并成功运行起来。下一节讲怎么在 air-ui 怎么创建第一个属于自己的组件。


系列文章:
自建vue组件 air-ui (1) -- 为啥我要自建一个类 element ui 的组件
自建vue组件 air-ui (2) -- 先分析一下 element ui 项目
自建vue组件 air-ui (3) -- css 开发规范
自建vue组件 air-ui (4) -- air-ui 环境搭建和目录结构
自建vue组件 air-ui (5) -- 创建第一个组件 Button
自建vue组件 air-ui (6) -- 创建内置服务组件
自建vue组件 air-ui (7) -- 创建指令组件
自建vue组件 air-ui (8) -- 实现部分引入组件
自建vue组件 air-ui (9) -- 用 vuepress 写文档
自建vue组件 air-ui (10) -- vuepress 写文档 (进阶版)
自建vue组件 air-ui (11) -- vuepress 写文档 (爬坑版)
自建vue组件 air-ui (12) -- 国际化机制
自建vue组件 air-ui (13) -- 国际化机制(进阶版)
自建vue组件 air-ui (14) -- 打包构建(dev 和 dist)
自建vue组件 air-ui (15) -- 主题定制
自建vue组件 air-ui (16) -- 打包构建 pub 任务
自建vue组件 air-ui (17) -- 开发爬坑篇以及总结