仿有赞后台+vue+ts+vuecli3.0+elementUi+二期项目结构文件搭建+以及路由的使用

本文转载于:猿2048网站➣仿有赞后台+vue+ts+vuecli3.0+elementUi+二期项目结构文件搭建+以及路由的使用

前言

昨天写了vue+ts+vuecli3.0第一场主要是一个vuecli搭建的内容，今天讲一下vue 项目结构搭建+以及路由的使用，看了一个小伙伴 $refs 报错问题有大佬可以回复我一波困扰已久，伸手党本人寻求帮助哈哈！在说这个之前我会介绍一下我写整个这个后台检索的逻辑，我们搜索的条件放到了url上面那么重置按钮就可以复用了，所有的搜索条件在url优势是可以刷新页面之前的操作记录都在这样就比较舒服，有赞就是这样的，建议有时间的老爷5分钟上手TypeScript 或者看完小弟的这个大概有个了解再去深入当前项目demo预览（QQ群技术讨论）838293023备注（github进来的）第三章

游泳健身了解一下：githubJQ插件 技术文档 技术文档会持续更新

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这里就不详细赘述了，由于本人比较愚钝（伸手党一枚）