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

栏目: JavaScript · 发布时间: 5年前

内容简介:昨天写了游泳健身了解一下:先看一波完成后的项目介绍(

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

游泳健身了解一下: github

1.项目搭建

先看一波完成后的项目介绍( webstorm 里面 ts 不支持引入 vue 所有爆红色,强迫症患者可以用 vscode 支持会更好)

仿有赞后台+vue+ts+vuecli3.0+elementUi+二期项目结构文件搭建+以及路由的使用
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+vuecli3.0+elementUi+二期项目结构文件搭建+以及路由的使用

然后我们去下载当前到依赖

福利篇

教你如何看插件是否可以使用当前到 vue + ts 项目(当前 ts + vue 还是比较少) TypeSearch

如果和下面的图一样能搜索出来的基本可以判断支持ts

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

下载当前项目依赖

我们打开当前图形管理工具

仿有赞后台+vue+ts+vuecli3.0+elementUi+二期项目结构文件搭建+以及路由的使用
选择然后下载(还要下载当前 ts

的)

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

这样才算把整个 aixo 下载好(其他插件都一样都需要下载2个)

第二个主要是在 node_modules 里面的 @types

里面定义一遍才可以使用

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

的页面差别不是很大

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

差别也不大

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

app.vue 文件

仿有赞后台+vue+ts+vuecli3.0+elementUi+二期项目结构文件搭建+以及路由的使用
讲一下这个把 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 这里就不详细赘述了,由于本人比较愚钝(伸手党一枚)

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

小结

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

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

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

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

以上所述就是小编给大家介绍的《仿有赞后台+vue+ts+vuecli3.0+elementUi+二期项目结构文件搭建+以及路由的使用》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

Python基础教程(第2版)

Python基础教程(第2版)

Magnus Lie Hetland / 司维、曾军崴、谭颖华 / 人民邮电出版社 / 2010-7 / 69.00元

本书是经典教程的全新改版,作者根据Python 3.0版本的种种变化,全面改写了书中内容,做到既能“瞻前”也能“顾后”。本书层次鲜明、结构严谨、内容翔实,特别是在最后几章,作者将前面讲述的内容应用到了10个引人入胜的项目中,并以模板的形式介绍了项目的开发过程。本书既适合初学者夯实基础,又能帮助Python程序员提升技能,即使是 Python方面的技术专家,也能从书里找到令你耳目一新的东西。一起来看看 《Python基础教程(第2版)》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具