仿有赞后台+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. 表单验证

下一章