自建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>
复制代码

那么首页就是

固然要是以为 logo 太显眼，要换或者去掉，直接去 App.vue 把他干掉。

总结

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

系列文章: