Build a background template with Vue2.5 and Elemnt-ui2: Improve (1. Build a framework)

Build a background template with Vue2.5 and Elemnt-ui2: Improve (1. Build a framework)

Introduction: I have used vue as a back-end management system for half a year. Recently element-ui has been upgraded to 2, so I decided to build a back-end template based on ele2. Here I will share how to build a back-end from 0 by hand with javascript:void(null) System template. This template will be updated for a long time. In the future maintenance, the common components of the common ending plan will be encapsulated in another system. The template guarantee: a template that is convenient for rapid development and extremely easy to expand. Based on this template, you only need to modify a small amount of code. Can be developed. Sharing the development process, to be continued...


GitHub address project online preview personal blog address This template covers:

  1. Login permission control
  2. Route jump interception
  3. Network request interception
  4. Dynamic side navigation
  5. Dynamic skinning
  6. Combine Element-ui version 2.0 or higher

And so on, a template that contains common functions of the back-end system, convenient for rapid development, and extremely easy to extend. Based on this template, you only need to modify a small amount of code to develop.

Overview of project main dependencies

  1. Vue.js
  2. Vue-router
  3. Vuex
  4. axios a library that encapsulates network requests
  5. element-ui2 version 2.0 or higher, are you hungry recently? Except for 2.0, the team will no longer maintain it after 1.+ years
  6. normalize.css css style reset
  7. nprogress a loading progress bar plugin
  8. screenfull a full screen plugin
  9. stylus , stylus-loader Css preprocessor used in this project, you can also choose other processors
  10. eslint-config-vue Eslint rules adopt the official rules of Vue source code, you can use custom or other rules, Eslint rules to query the dictionary

Preparation before building

1. Environmental preparation

  1. The latest node.js environment installation, npm, yarn, vue-cli scaffolding installation, etc. will not be discussed here.

2. Simulation data

  1. As it is a personal project, the data in this template are all online simulation data generated by Easy Mock . Those who are interested can learn more. The address interface configuration of the simulated data is in the relevant configuration of the root directory/config/dev.env.js, just change it to your request address
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API: '""'  // 

2. Interface conventions. Generally, there are fixed conventions for the front-end and back-end contact interfaces in the project. Although this project is simulated data, in order to be standardized, the interface format should be briefly agreed first to facilitate the judgment when requesting interception later. The interface convention rules are as follows

    "code": "H0000",
    "data": "88888888"
  S0000   !
  B0000   !


  data json 

3 session_key token header Authorization 

3. cross-domain issues

  1. Since this template project uses Easy Mock, there is no front-end to solve cross-domain problems, but if you need to solve cross-domain problems in your actual needs, you can configure reverse proxy for cross-domain or webpack on Baidu cors: I won t explain it in detail here, Baidu There are many answers, I simply post a picture here: webpack configuration'config/index.js'
    axios configuration
    Just correspond to these places

4. font icon

1. The built-in icons in Element-ui are definitely not enough in actual projects. I use the Ali iconfont font icon library, register an account, create a project to add the font icons you want, and a cdn css link will be generated , And then link this style in your head. Just update this address when you add a new icon.

5. about the use of vuex

Not every project must use vuex, use it according to the needs of the project. For projects with uncomplicated data flow, you can say that the data is saved locally, and similar effects can be achieved without affecting project requirements. I personally feel that vuex is very cumbersome to use, and use it according to your project. Still borrowing the terminology from official documents: Although Vuex can help us manage shared state, it also comes with more concepts and frameworks. This requires a balance between short-term and long-term benefits. If you don't plan to develop large single-page applications, using Vuex may be tedious and redundant. It is true-if your application is simple enough, you'd better not use Vuex. A simple global event bus is enough for you

Start building

1. Vue-cli scaffolding project

Use Vue official scaffolding to generate the project. When generating it, it is best to choose the webpack template, unit test, and install it according to your needs.

2. Directory structure

  build                     //   
  config                    // 
  src                       // 
      api                   // 
      assets                //   
      components            // 
      directive             // 
      filtres               // filter
      mock                  //mock 
      router                // 
      store                 // store 
      styles                // 
      utils                 // 
      views                 //view
      App.vue               // 
      main.js               //     
      permission.js         //   
  static                    // 
      img                   // 
      theme                 // 
  .babelrc                  //babel-loader  
  eslintrc.js               //eslint  
  .gitignore                //git  
  .fjpublish.config.js      //   
  index.html                //html 
  package.json              //package.json


3. Webpack configuration transformation

3.1 In the actual development process, there are often multiple environments, such as a development environment, a test environment, a production environment, and so on. We need to configure multiple environments.

step 1

Create a new sit.env.js file in the ./config folder

module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '""',
  CRM_PATH: '""',        //  

dev.env.js and prode.env.js can also be configured similarly, and the different ports requested by each environment can be configured here.

Later in your program, if you want to use these variables, you can refer to the following example

let baseUrl  = process.env.BASE_API;  
let crmPath = process.env.CRM_PATH;
// axios 
const service = axios.create({
  baseURL: BASE_API,      //api base_url
Step 2

Modify the ./config/index.js file and include sit.env.js in the build object of index.js: as shown in the figure

Step 3

Modify the ./build/build.js file, comment or delete process.env.NODE_ENV ='production', because we need to dynamically configure NODE_ENV later, this step is shown in the figure

Step 4

Modify the ./build/ file to modify the evn, not BB directly above the picture

In this way, the configuration of webpack has been modified. Here, you can modify the UglifyJsPlugin in this file by the way, and you can remove the console.log and debugger when building the package. The configuration is as follows. (This step has nothing to do with multi-environment configuration)

new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        drop_debugger: true,     //  debugger
        drop_console: true        //   console
      sourceMap: true

Step 5

We need to modify the script statement of package.json to add commands to start our new service

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build:sit": "NODE_ENV=sit node build/build.js",
    "build:prod": NODE_ENV=production node build/build.js"

Then start run run build: sit, but an error is reported at this time, NODE_ENV is not recognized, this is because windows does not support the setting of NODE_ENV=sit. We only need to install a cross-env plugin

  yarn add cross-env -D   // npm  
  npm install cross-env -dev--save

Then continue to modify a script statement to start

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build:sit": "cross-env NODE_ENV=sit node build/build.js",
    "build:prod": "cross-env NODE_ENV=production node build/build.js"

In this way, you start npm run build:sit to generate the code for building the packaged test environment in the dist file directory, and start npm run build:prod to generate the code for building the packaged production environment in the dist file directory

3.2 Combine fjpublish to automatically publish to the server.

step 1

Install fjpublish

npm install fjpublish -g

Create a fjpublish.config.js file (fjpublish configuration file) in the project root directory

module.exports = {
  modules: [{
    name: ' ',   
    env: 'sit',
    ssh: {
      host: '',     // 
      port: 22,                        // 
      username: 'root',         // 
      password: 'XXXX'        // 
    buildCommand: 'build:sit',    //   === npm run build:sit  
    localPath: 'dist',                   // 
    remotePath: '/test/xx',       // 
    name: ' ',
    env: 'other',

Similarly, for convenience, we need to modify the script mode of package.json

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build:sit": "cross-env NODE_ENV=sit node build/build.js",
    "build:prod": "cross-env NODE_ENV=production node build/build.js"
    "public:sit": "fjpublish env sit"

Run the command npm run public:sit after confirmation, it will automatically package the code of build:sit, and publish it on the server you specify after compression, and execute your corresponding configuration. If you need to publish in multiple environments at the same time, you only need to enter fjpublish.config Add an object to the modules in .js for related configuration.

So far, the front-end automation of the Vue-cli project has been configured