preface

The previous two pages provided a detailed analysis of the Element-UI project:

  • Self-built VUE component AIR-UI (2) — Take a look at the Element UI project
  • Self-built VUE component AIR-UI (3) – CSS development specification

I’m finally getting into air-UI. In fact, as mentioned earlier, element-UI does a pretty good job of component logic and CSS, and I can’t find any major flaws with it, and they’re not the main reason I’m rewriting UI components. Air-ui is mainly different from Element-UI in the following aspects, and is mainly used to write articles in these aspects:

  1. The directory structure
  2. documents
  3. Build on
  4. Theme customization
  5. The multilingual aspect and some of the pitfalls encountered in the whole process

This section focuses on the air-UI environment setup and directory structure.

Build based on VUe-CLI

If there is one scaffold for the most popular VUE project today, it is undoubtedly vuE-CLI, so the directory structure of vuE-CLI initialized projects is also the most common and best understood because of the largest audience. Many of our VUE projects start with vuE-CLI, and air-UI as a VUE project obviously does the same. (In fact, the element-UI directory structure is so weird, and I guess that’s why vue-CLI wasn’t popular enough in the early days, when it was all about self-built Vue projects.)

Initialize the project

Instructions for scaffolding construction:

npm install -g vue-cli
vue init webpack projectName
cd projectName
npm install
npm run dev
Copy the code

And of course the projectName here is air-UI. In this way, a simple VUE project based on vue-CLI is set up. Of course air-UI is installed with YARN, so the instructions look like this:

npm install -g vue-cli
vue init webpack air-ui
cd air-ui
yarn
yarn dev
Copy the code

When creating a project, all the default options are used. To install dependencies, use YARN. Finally, the local beta runs:

The vuE-CLI version for air-UI is 3.0.1

F: \ code \ air - UI > vue - version 3.0.1Copy the code

Webpack version

The default version is WebPack 3.X. From package.json and yarn.lock, The current webpack version is 3.12.0, indicating that the Webpack installed in VUe-CLI 3.x has not been upgraded to WebPack 4.x. (This is not quite the same as Element-UI, which was upgraded to 4.x after 2.4.11. Of course, this is only about packaging efficiency and speed, so you can upgrade to 4.x manually later.)

The version of the vue

According to package.json and yarn.lock, vue with VUe-cli 3.x is definitely not the latest vue 3.x, the specific version is 2.6.11. Now that the latest vUE 3.x is available, you can manually upgrade it to Vue 3.x later.

Air-ui complete directory comparison

The directory structure of the initial vuE-CLI project is as follows:

| | air – UI – build logic/package | — – | — – build, js | — – | – check – version. Js | — – | – logo. The PNG | — – | – utils. Js | — | — vue-loader.conf.js | — | — webpack.base.conf.js | — | — webpack.dev.conf.js | — | — Webpack. Prod. Conf. Js | – config/packaging logic configuration file | — – | – dev. The env. Js | — – | — – index, js | — – | – prod. The env. Js | — – | – the test. The env. Js | — – | SRC/business logic — – | | – deposit assets/static resources – | — – | — – logo. The PNG | — – | — – | components/storage component files — – | — – | — – the HelloWorld. Vue | — – | — – the router/routing file | — – | — – | – index. The js | — – | – App. Vue vue entry template | — – | – main. Js entrance js file | – static/store front static resource, Defaults to an empty | | – – – the test/unit test file -. Babelrc Babel configuration file | -. Eslintignore eslint ignore configuration file | -. Eslintrc. | js eslint configuration file -. Postcssrc. | js postcss configuration file – index. The HTML project home page entry | – package. The json packaging entry file | – README. Md README file | — – Yarn. lock Yarn lock file

Here is the final directory structure for the complete AIR-UI:

| | air – UI – build logic/package | — – | — – build, js | — – | – check – version. Js | — – | git – the sh pub release script | — – | — logo.png | — | — utils.js | — | — vue-loader.conf.js | — | — webpack.base.conf.js | — | — Webpack.com mon. The task of js common components package | — – | — – webpack.com ponent. Js make the task of the individual components | — – | – webpack. Dev. Conf., js | — – | — – Webpack. Prod. Conf. Js | – config/packaging logic configuration file | — – | – dev. The env. Js | — – | — – index, js | — – | – prod. The env. Js | — – | – the test. The env. Js | — – | docs/document – lib/component package dist directory | – SRC/business logic | — – | — – deposit assets/static resources | — – | — – | — – Logo. PNG | — – | – components/storage component files | — – | — – | — – the HelloWorld. Vue ~ | — – | — – | — – the button/specific components | — – | — – | Omit N components under – XXXXX/directory | — – | — — — directives/custom command | — – | – lang/language folder | — – | — – the locale/language logically related directory | — – | – mixins/share mix method | — – | — – the router/routing file | — – | — – | – index. The js | — – | — – styles/deposit sass style file | — – | — – Theme/store theme file | — – | — – transitions/deposit transitions component file | — – | — – utils/store public methods file | — – | — – views / Store development environment the template file | — – | – App. Vue vue entry template | — – | — – main. Js entrance js file | – static/store front static resource, Defaults to an empty | | – – – the test/unit test file -. Babelrc Babel configuration file | -. Eslintignore eslint ignore configuration file | -. Eslintrc. | js eslint configuration file -. Postcssrc. | js postcss configuration file – components. The json components of json file | – gulpfile. Js gulp packaging file | – index. The HTML project | homepage entry – package. Json packaging entry file | – README. Md README file | – yarn. The lock yarn lock file

You can see that air-UI is based on the initial directory structure of the VUE-CLI project. There are just some new directory extensions on this basis, which is the directory structure highlighted in red above:

  1. buildThe directory adds scripts and tasks associated with packaging components and publishing
  2. increaseddocsUsed to store documents related to demo examples
  3. libThat is, after you pack the componentsdistDirectory,element-uiPackaged dist
  4. componentsThe directory will still only store component-specific, of course, the default beforeHelloWorld.vueIs deleted
  5. srcUnder thedirectives.locale.mixins.transitions.utils 跟 element-ui 的 srcThose directories are the same function
  6. srcUnder thelangIt’s a directory of multilingual entry files, andelement-ui 的 src/locale/langIt’s the same thing, except we’ve got itsrcIt’s actually good to do that, and we’ll talk about why we do that when we talk about multilingual mechanics.
  7. srcUnder thestylesIs to store sass style files, the subdirectory structure of this directory, andelement-ui 的 packages/theme-chalk/srcThe directory structure is the same, is borrowed from, the same subdirectorycommon.date-picker.fonts.mixinsAnd the corresponding SASS files for each component.
  8. srcUnder thethemeSome of the configuration files that hold the theme, which we’ll talk about later when we talk about the theme, and this directoryelement-uiDon’t have.
  9. srcUnder theviewsSave the template file in the local development environmentHelloWorld.vue
  10. Root directorycomponents.json 跟 element-uiRoot directorycomponents.jsonThe file is the same, a list of components that need to be individually repackaged
  11. gulpfile.jsGulp configuration file,air-uiThe build of gulp consists of many gulp taskselement-uiNot quite.

Change to the new directory structure and run

After changing to the new directory structure, the following local run, yarn Dev, is built in the same way, no adjustment is required, but because vue-router has been adjusted. Before in the SRC/router/index. Js page presentation is to read the SRC/components/HelloWorld. Vue of this file:

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
    }
  ]
})
Copy the code

Now the file does not exist. SRC /views/home.vue So the code will look like this:

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)
      }
    }
  ]
})
Copy the code

That will do. SRC /views/home.vue: SRC /views/home.vue: SRC /views/home.

<template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <script> export default { data () { return { msg: 'air-UI - Ve2. X based, reusable UI components'}}} </script>Copy the code

So the home page is

Of course, if you find the logo too obvious, change or remove it, go to App.vue and kill it.

conclusion

This section is mainly about how to build the prototype of AIR-UI project based on VUe-CLI. And it worked. The next section explains how to create your first component in Air-UI.

Series of articles:

  • Air-ui (1) — Why do I need to build an Element UI component
  • Self-built VUE component AIR-UI (2) — Take a look at the Element UI project
  • Self-built VUE component AIR-UI (3) – CSS development specification
  • Air-ui (4) — Air-UI environment setup and directory structure
  • Air-ui (5) — Create the first vUE component, Button
  • Self-built VUE component AIR-UI (6) – Creates built-in service components
  • Build vUE component AIR-UI (7) – Create command component
  • Self-built VUE component AIR-UI (8) — Implementation part introduces components
  • Build your own VUE component air-UI (9) — document with Vuepress
  • Air-ui (10) — Vuepress Documentation (Advanced version)
  • Vue Component Air-UI (11) — Vuepress Documentation (Crawl version)
  • Self-built VUE component AIR-UI (12) — Internationalization mechanism
  • Self-built VUE Component AIR-UI (13) — Internationalization Mechanism (Advanced Version)
  • Self-built VUE component AIR-UI (14) — Packaged Build (Dev and Dist)
  • Self-built VUE component AIR-UI (15) — Theme customization
  • Self-built VUE component AIR-UI (16) – Packages to build pub tasks
  • Build your own VUE component AIR-UI (17) – Develop a pit crawl and summary