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

摘要： 生病了，沒有及時寫上，各位觀眾老爺抱歉，今天寫上第三期的應該比較乾貨，具體講我們怎麼搭建專案，以及怎麼和後端進行互動， element 的引入， vuex 在 ts 改版後的使用方式當前專案demo預覽 游泳健身瞭解一下：githubJQ外掛技術文件技術文件會持續...

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

游泳健身瞭解一下： ofollow,noindex"> github JQ外掛 技術文件 技術文件會持續更新

內容總結

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',
});
};

複製程式碼

使用方式