仿有赞后台+vue+ts+vuecli3.0+elementUi 集合看这篇就够了

前言

最近尝试了vue+ts的组合个人感觉vue对于ts并没有特别的像angular2这样的友好，但是对于ts和js之间个人还是选择ts的。语法糖来说es6简直舒爽，下面我详细介绍下怎么使用ts+vue。ts+vue的插件会少上很多，但是肯定会随着vue对ts的支持插件也会越来越多当前项目demo预览（作为一个菜鸡毕竟经历众多项目可以给一些新手一点提示（QQ群技术讨论）838293023备注（github进来的

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

内容总结

vue cli3的安装。
vue config文件配置
项目结构文件搭建
路由的使用
vue cli启动以及启用下载ts 支持vue 的插件
ts aixo的使用
vue X的使用
图片上传（批量上传）//ts element的使用
分页的使用
重制按钮的分装
富文本编译器

1.VueCLI 3.0

VueCLI 3.0 首先安装node.js自己百度安装

安装：

# 然后我们安装vuecli3.0 npm 或者 yarn都是可以的网上慢的小伙子可以用yarn
npm install -g @vue/cli
# OR
yarn global add @vue/cli
复制代码

创建一个项目：

vue create my-project
# OR
vue ui
复制代码

第一个是自己创建过的模版。
第二个是系统默认的
第三个自己选配置
我这边有创建过一个，我们选红色选中的这个

我们这样选择。空格键是否选中，上下选择

直接回车（默认同意）

一路回车然后选择package.json 看下我们选择了啥ts 然后sass 语法检查esl

然后再回车就进行最后的cli项目的下载了。耐心等待

我们下载好了

# 输入
vue ui
复制代码

欢迎来到vuecli3.0 图形话界面，现别着急现看我们的项目文件结构

2.vue config文件配置

下面是我们的文件的结构

  ##  文件介绍
 
 1.   node_modules //当前node模块存放处
 2.   public //index页面所在镜头文件也可以放这个里面
 3.   src //当前项目存放
        assets //静态文件存放
        components //组件存放
        views //项目存放
        app.vue //这个我们文件的主要路由输入地方
        main //总的js文件
        router //路由文件
        shims-tsx.d //兼容jsx
        shims-vue.d //兼容vue
        store //vuex总文件
 4.   pakeage.js //文件（我们安装的依赖都再里面可以看到，也可以根据这个去下载node_modules）
 5.   我们还少一个vue.config.js 和 pakeage.js 同级
复制代码

为我等伸手党送上一份福利

// vue.config.js
module.exports = {
    // 选项...
    // 当使用基于 HTML5 history.pushState 的路由时；
    // 当使用 pages 选项构建多页面应用时。
    baseUrl:"",
    // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。
    outputDir:"webApp",
    // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
    assetsDir:"assets",
    // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
    indexPath:"index.html",
    // 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。然而，这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML，你可以通过将这个选项设为 false 来关闭文件名哈希。
    filenameHashing:true,
    // 多页面
    pages:undefined,
    // 编译警告
    lintOnSave:false,
    // 是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了，但是这会让你的应用额外增加 10kb 左右。
    runtimeCompiler:false,
    // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来。
    transpileDependencies:[],
    // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
    productionSourceMap:false,
    // 设置生成的 HTML 中 "stylesheet"> 和 

    # 使用方式
    # html .sync 配合update可以实现双向绑定
    "BeforeUploadImg">
    
    # script
    import BeforeUpload from '@/components/beforeUpload/beforeUpload.vue';
    import { Component, Vue, Model, Watch, Prop } from 'vue-property-decorator';
    @Component({
        components: {
            BeforeUpload,
        }
    })
    export default class Content extends Vue {
        ## 默认图片
        public BeforeUploadImg: string = '';
    }

复制代码

批量图片上传

我们想要更佳简便的使用方式

// 批量图片上传（组件）



    ## html UploadListsImg为当前剩下的图片的list    removeListImg为删除掉的list 使用方式
    "UploadListsImg"  @removeListImg="removeListImg" style="width: 400px">
    ## script
    import UploadListImg from '@/components/uploadListImg/uploadListImg.vue';
    import { Component, Vue, Model, Watch, Prop } from 'vue-property-decorator';
    @Component({
        components: {
            UploadListImg,
        }
    })
    export default class Content extends Vue {
        public UploadListsImg: object[] = [
            {
                name: 'food.jpeg',
                url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
            },
            {
                name: 'food2.jpeg',
                url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
            }
        ];
        public removeListImg: object[] = []
    }
复制代码

3.分页的使用

分页我们想要更加简便的使用方式

// 分页组件




# html 使用方式
"Paginationtotal">
# script
import Pagination from '@/components/pagination/pagination.vue';
import { Component, Vue, Model, Watch, Provide } from 'vue-property-decorator';
@Component({
    components: {
        Pagination
    }
})
export default class Content extends Vue {
    Paginationtotal:number = 0;
}
复制代码

4.重制按钮的分装

我们重置只需要把当前的分页重置成第一页 20跳数据即可

// 重置按钮




## html 使用方式
"searchReserved">
## script
import Reset from '@/components/reset/reset.vue';
@Component({
    components: {
        Reset
    }
})
export default class Content extends Vue {
    searchReserved = {}
}
复制代码

5.富文本编译器

关于富文本编译器，我想大家应该不陌生了，我推荐一筐tinyMce来使用到我们当前到项目里面来富文本编译器ts都支持还不是多，我找来很多来尝试，最后决定用tinyMce下载一下这两个，中间踩了很多坑，给我们伸手党线上开箱即食的代码把

把cdn放上速度更快

重要的说一下我们的静态的这个文件放public 下面这个一定要放这，下面的这个一定要放进去不然页面食用不了文件链接

 ## 富文本编译器 ## EditorContent 默认值 onChangeHandler 改变的事件 editorInit 初始配置 
 ## 基本上图片上传都需要form表单方式上传  FormData



## html 使用方式
"EditorContent">
## script
import Editor from '@/components/tinyMceEditor/tinyMceEditor.vue';
 @Component({
        components: {
            Editor
        }
    })
export default class Content extends Vue {
    // 默认图文详情
    public EditorContent: string = '';
}

复制代码

1.

使用方式

小结

基本的插件都讲了一下有问题可以添加上面的qq群