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

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

内容总结 项目结构的搭建 element 的引入 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的引入项目结 ...

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:仿有赞后台+vue+ts+vuecli3.0+elementUi+三期aixo的使用vueX的使用element的引入项目结 ...
本站链接:https://www.codesec.net/view/611551.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(68)