仿有贊後臺+vue+ts+vuecli3.0+elementUi+三期aixo的使用vueX的使用element的引入專案結構的搭建

前言

生病了，沒有及時寫上，各位觀眾老爺抱歉，今天寫上第三期的應該比較乾貨，具體講我們怎麼搭建專案，以及怎麼和後端進行互動，element的引入，vuex在ts改版後的使用方式當前專案demo預覽

游泳健身瞭解一下：githubJQ外掛 技術文件 技術文件會持續更新

---

內容總結

1. 專案結構的搭建
2. element的引入
3. aixo的使用（ajax）

---

1.專案結構的搭建

我們的專案總的是在layout資料夾裡面的先看下這個檔案

    layout
        content
            AppMain.vue //當前檔案為我們的主要路由
            index.ts //作為我們的總的轉接的檔案
            navbar.vue //當前專案的左側導航
            newtab.vue //定義的元件
            prompt,vue //最左側的結構（先預留起來）
        layout.vue //總專案的檔案 
        style.scss //當前專案的css
複製程式碼

看我們引入的是一個資料夾，會自動獲取到index.ts然後index.ts裡面es6的寫法

## 新寫法ES6 （有時間的老爺可以看下es6）有不懂的可以加群裡面直接詢問專案結構大概就是這樣各位老爺可以github一下即可檢視當前程式碼
    components: {
        Navbar,
        AppMain,
        Prompt
    }
## 老寫法   
    components: {
        Navbar: Navbar,
        AppMain: AppMain,
        Prompt: Prompt
    }
複製程式碼

2.element的引入

1.先安裝依賴

2.引入css

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
複製程式碼

3.main.ts 引入全域性

4.可以使用了

複製貼上一下element的程式碼

http://element.eleme.io/#/zh-CN/component/time-picker
複製程式碼

我們這邊使用一定要public共有變數， 別使用這個private私有變數(上面的html裡面會找不到下面的變數雖然不會報錯)

5.效果圖

3.aixo的使用（ajax）

圖形化介面去下載兩個一個是用來相容 ts的

附上封裝好的ajax程式碼

import Axios from 'axios';
import { Message } from 'element-ui';
import { getToken } from '@/views/utils/auth'; // token 不需要可以不要

const httpServer = (opts: any) => {
        const httpDefaultOpts = { // http預設配置
            method: opts.method,
            baseURL: 'https://xxxx.com',  // 測試
            url: opts.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;

複製程式碼

import Http from '@/views/aixo/http';

/**
 * 總系統角色選單 | 根據使用者ID獲取所屬角色的選單
 * @param userId 使用者id
 */
export const managxxxMenuUserId = (userId: any) => {
    return Http({
        url: `/xxx/${userId}`,
        method: 'post',
    });
};

複製程式碼

使用方式

小結

各位老爺，身體不適可能會拖幾天這個禮拜肯定可以寫完（公司不加班的話）

後面的章節介紹

1. vueX的使用（2種方式）
2. 圖片上傳（批量上傳）//ts element的使用
3. 分頁的使用
4. 重製按鈕的分裝
5. 富文字編譯器
6. 表單驗證

下一章