仿有贊後臺+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. 表單驗證

下一章