仿有赞后台+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这里就不详细赘述了，因为本人比较愚钝（伸手党一枚）

小结

下面送上项目成功后的样子（明天应该会详细讲解一下本ui总体的搭建以及插件的使用）具体的插件的文档会近期更新上

后面会有一个基于element+ts完整的后台会搞出来而后会出一个基础版本各位老爷点个赞👍

第三章