仿有赞后台+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

复制代码

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. 表单验证