2.vue+ts+vuecli3.0+elementUi

仿有贊后台+vue+ts+vuecli3.0+elementUi+三期aixo的使用vueX的使用element的引入項目結構的搭建

前言

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

---

內容總結

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. 表單驗證