preface

I am sick and did not write in time, dear audience, SORRY, the third phase of writing today should be more effective, specifically how we build the project, and how to interact with the back end, the introduction of element, the use of VUex after TS revision of the current project demo preview

The githubJQ plugin technical documentation will be updated continuously

Contents summary

  1. Set up the project structure
  2. elementThe introduction of
  3. aixoThe use of (ajax)

1. Set up the project structure

Our project is in the layout folder so let’s take a look at this file

Layout Content appmain.vue // Current file for our main route index.ts // navbar.vue // Left navigation of current project newtab.vue // components defined by Prompt,vue // Layout. Vue // Total project file style. SCSS // CSS for current projectCopy the code

Look what we’ve introduced is a folder that will automatically get the index.ts and write es6 in index.ts

## new writing method ES6 (have time master can look at ES6) have not understand can add group inside directly ask the project structure is probably like this everyone master can view the current code on Github
    components: {
        Navbar,
        AppMain,
        Prompt
    }
# # the old way
    components: {
        Navbar: Navbar,
        AppMain: AppMain,
        Prompt: Prompt
    }
Copy the code

2.elementThe introduction of

1. Install dependencies first

2. The introduction of CSS

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
Copy the code

3. Main. ts introduces the global

4. It’s ready to use

Copy and paste the code for Element

http://element.eleme.io/#/zh-CN/component/time-picker
Copy the code

Make sure you use a public public variable instead of a private one (the following variables will not be found in the HTML above, although this will not give an error)

5. Rendering

3.aixoThe use of (ajax)

Graphical interface to download two one is for COMPATIBILITY with TS

ajax 

import Axios from 'axios';
import { Message } from 'element-ui';
import { getToken } from '@/views/utils/auth'; Const httpServer = (opts: any) => {const httpDefaultOpts = {// HTTP default configuration method: opts.method, baseURL:'https://xxxx.com'Url, timeout: 100000, params: opts.params, data: opts.params, headers: opts.method =='get' ? {
            'X-Requested-With': 'XMLHttpRequest'.'Accept': 'application/json'.'Content-Type': 'application/json; charset=UTF-8'.'systoken': ' ',}, {'Content-Type': 'application/json; charset=UTF-8' ,
            'systoken': ' ',}};if (getToken()) {
        const token: any = getToken();
        httpDefaultOpts.headers.systoken = token;
    }
        if (opts.method == 'get') {
        delete httpDefaultOpts.data;
    } else {
        delete httpDefaultOpts.params;
    }
        const promise = new Promise(function(resolve, reject) {
        Axios(httpDefaultOpts).then(
        (res) => {
            if (res.data.code == -3) {
                resolve(res.data);
            } else{ resolve(res.data); } }, ).catch( (response) => { reject(response); }); });return promise;
};

export default httpServer;

Copy the code
import Http from '@/views/aixo/http'; / * * * total system character menu | according to the user ID for the character's menu * @ param userId user ID * /export const managxxxMenuUserId = (userId: any) => {
    return Http({
        url: `/xxx/${userId}`,
        method: 'post'}); };Copy the code

use

summary

Gentlemen, I am sure I can finish it this week (if the company does not work overtime).

The following chapters introduce

  1. vueX(2 ways)
  2. Image upload (batch upload) //ts elementThe use of
  3. Use of paging
  4. Rework the reassembly of buttons
  5. Rich text compiler
  6. Form validation

The next chapter