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

昨天写了 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: