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

栏目: 编程语言 · 发布时间: 5年前

内容简介:生病了,没有及时写上,各位观众老爷抱歉,今天写上第三期的应该比较干货,具体讲我们怎么搭建项目,以及怎么和后端进行交互,游泳健身了解一下:我们的项目总的是在

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

游泳健身了解一下: github JQ插件 技术文档 技术文档会持续更新

内容总结

  1. 项目结构的搭建
  2. element 的引入
  3. aixo 的使用( ajax

1.项目结构的搭建

我们的项目总的是在 layout 文件夹里面的先看下这个文件

仿有赞后台+vue+ts+vuecli3.0+elementUi+三期aixo的使用vueX的使用element的引入项目结构的搭建
layout
        content
            AppMain.vue //当前文件为我们的主要路由
            index.ts //作为我们的总的转接的文件
            navbar.vue //当前项目的左侧导航
            newtab.vue //定义的组件
            prompt,vue //最左侧的结构(先预留起来)
        layout.vue //总项目的文件 
        style.scss //当前项目的css
复制代码

看我们引入的是一个文件夹,会自动获取到 index.ts 然后 index.ts 里面 es6 的写法

仿有赞后台+vue+ts+vuecli3.0+elementUi+三期aixo的使用vueX的使用element的引入项目结构的搭建
## 新写法ES6 (有时间的老爷可以看下es6)有不懂的可以加群里面直接询问项目结构大概就是这样各位老爷可以github一下即可查看当前代码
    components: {
        Navbar,
        AppMain,
        Prompt
    }
## 老写法   
    components: {
        Navbar: Navbar,
        AppMain: AppMain,
        Prompt: Prompt
    }
复制代码

2. element 的引入

1.先安装依赖

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

2.引入css

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
复制代码
仿有赞后台+vue+ts+vuecli3.0+elementUi+三期aixo的使用vueX的使用element的引入项目结构的搭建

3.main.ts 引入全局

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

4.可以使用了

复制粘贴一下 element 的代码

http://element.eleme.io/#/zh-CN/component/time-picker
复制代码

我们这边使用一定要 public 共有变量, 别使用这个 private 私有变量(上面的html里面会找不到下面的变量虽然不会报错)

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

5.效果图

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

3. aixo 的使用( ajax

图形化界面去下载两个一个是用来兼容 ts

仿有赞后台+vue+ts+vuecli3.0+elementUi+三期aixo的使用vueX的使用element的引入项目结构的搭建
附上封装好的 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',
    });
};

复制代码

使用方式

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

UNIX网络编程 卷1:套接字联网API(第3版)

UNIX网络编程 卷1:套接字联网API(第3版)

[美]W. 理查德•史蒂文斯(W. Richard Stevens)、比尔• 芬纳(Bill Fenner)、安德鲁 M. 鲁道夫(Andrew M. Rudoff) / 匿名 / 人民邮电出版社 / 2014-6-1 / 129.00

《UNIX环境高级编程(第3版)》是被誉为UNIX编程“圣经”的Advanced Programming in the UNIX Environment一书的第3版。在本书第2版出版后的8年中,UNIX行业发生了巨大的变化,特别是影响UNIX编程接口的有关标准变化很大。本书在保持前一版风格的基础上,根据最新的标准对内容进行了修订和增补,反映了最新的技术发展。书中除了介绍UNIX文件和目录、标准I/......一起来看看 《UNIX网络编程 卷1:套接字联网API(第3版)》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

MD5 加密
MD5 加密

MD5 加密工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具