仿有赞后台+vue+ts+vuecli3.0+elementUi+二期项目结构文件搭建+以及路由的使用
栏目: JavaScript · 发布时间: 6年前
内容简介:昨天写了游泳健身了解一下:先看一波完成后的项目介绍(
昨天写了 vue
+ ts
+ vuecli3.0
第一场主要是一个 vuecli
搭建的内容,今天讲一下 vue
项目结构搭建+以及路由的使用,看了一个小伙伴 $refs
报错问题有大佬可以回复我一波困扰已久,伸手党本人寻求帮助哈哈!在说这个之前我会介绍一下我写整个这个后台检索的逻辑,我们搜索的条件放到了url上面 那么重置按钮就可以复用了,所有的搜索条件在url优势是可以刷新页面之前的操作记录都在这样就比较舒服,有赞就是这样的,建议有时间的老爷5分钟上手TypeScript 或者看完小弟的这个大概有个了解再去深入
游泳健身了解一下: github
1.项目搭建
先看一波完成后的项目介绍( webstorm
里面 ts
不支持引入 vue
所有爆红色,强迫症患者可以用 vscode
支持会更好)
public //当前文件 static //可以放静态资源不会被打包(我放的是富文本编译器的文件后期会太慢可以换成cdn直接引入到index.html) src //当前项目文件 assets //静态资源存放需要被打包 components //组件存放处 beforeUpload //单个图片上传组件 (基于element) pagination //分页插件 (基于element) reset //重置按钮组件 tinyMceEditor //富文本编译器(这个是重点ts支持的vue插件当前对于我们伸手党来说比较少) uploadListImg //批量图片上传(基于element) verification //表单验证 utils //当前项目公用方法 views //当前项目存放地址 aixo //当前项目ajax封装 content //当前项目业务逻辑 filters //当前项目过滤器 haveNot //404页面 layout //项目结构布局 login //当前项目登陆页面 method //当前项目的静态遍历存放 store //当前项目vuex存放(不要为了用vuex而用,其实很多项目都不需要用到vuex的) system //权限管理相关 typings //ts定义使用 utils //存放其他文件(我这边存了cookie的文件) app.vue //全局路由页面 main.ts //启始的js permission.ts //路由中转页面 route //路由页面 shims-tsx.d //支持jsx shims-vue.d //支持vue vue-config //vue配置 vue-shim.d.ts //声明全局方法(ts会自动抓取.d.ts文件部分全局方法需要定义才可以使用) 复制代码
组件组件后面会一个一个讲解,公共方法也会讲,先要下载当前需要的 ts
的插件
## 最主要到是这3个 1. aixo 2. element 3. js-cookie 复制代码
看下package.js 可以看到我们当前到依赖
然后我们去下载当前到依赖
福利篇
教你如何看插件是否可以使用当前到 vue
+ ts
项目(当前 ts
+ vue
还是比较少) TypeSearch
如果和下面的图一样能搜索出来的基本可以判断支持ts
下载当前项目依赖
我们打开当前图形管理工具
选择然后下载(还要下载当前ts
的)
这样才算把整个 aixo
下载好(其他插件都一样都需要下载2个)
node_modules
里面的
@types
里面定义一遍才可以使用
路由页面和vue
的页面差别不是很大
main.js
差别也不大
app.vue
文件
讲一下这个把
vue-property-decorator
不然小伙伴们对这个会很不懂的
### vue-property-decorator @Prop 父子组件之间传值 ## 使用方式 @Prop({ type: String, default: 'Default Value' }) msg: string; @Model 数据双向绑定 @Model('change') checked: boolean @Watch 监听数据变化 //监听路由变化 @Watch('$route') onRouteChanged(route: any, oldRoute: any) :void { this.$forceUpdate() ## 刷新当前的数据 } @Provide 提供 / @Inject 注入 ## 父 @Provide('users') users = [ { name: 'test', id: 0 } ] ## 子 @Inject('users') users; 修饰器 const Log = (msg) => { return createDecorator((component, key) => { console.log("#Component", component); console.log("#Key", key); //log console.log("#Msg", msg); //App }) } @Log('fullMessage get called') get fullMessage() { return `${this.message} from Typescript` } 复制代码
可能您还是不懂建议看下官方文档 vue-property-decorator
这里就不详细赘述了,由于本人比较愚钝(伸手党一枚)
小结
下面送上项目成功后的样子(明天应该会详细讲解一下本ui整体的搭建以及插件的使用)具体的插件的文档会近期更新上
后面会有一个基于element+ts完整的后台会搞出来然后会出一个基础版本各位老爷点个赞:+1:
以上所述就是小编给大家介绍的《仿有赞后台+vue+ts+vuecli3.0+elementUi+二期项目结构文件搭建+以及路由的使用》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Raspberry Pi设置自动拨号搭建无线路由环境
- hapi框架搭建记录(二):路由改造和生成接口文档
- 使用koa搭建web服务,从路由到MySql
- 简单搭建OSPF,RIP,NSSA,外部路由汇总网络拓扑
- vue路由篇(动态路由、路由嵌套)
- 小程序封装路由文件和路由方法,5种路由方法全解析
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
HEX HSV 转换工具
HEX HSV 互换工具
HSV CMYK 转换工具
HSV CMYK互换工具