仿有赞后台+vue+ts+vuecli3.0+elementUi+三期aixo的使用vueX的使用element的引入项目结构的搭建

生病了，没有及时写上，各位观众老爷抱歉，今天写上第三期的应该比较干货，具体讲我们怎么搭建项目，以及怎么和后端进行交互， element 的引入， vuex 在 ts 改版后的使用方式当前项目demo预览

游泳健身了解一下： 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 的

代码

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

复制代码

使用方式