仿有赞后台+vue+ts+vuecli3.0+elementUi

前言

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

游泳健身了解一下：github JQ插件

---

内容总结

1. vue cli3的安装。
2. vue config文件配置
3. 项目结构文件搭建
4. 路由的使用
5. vue cli启动以及启用下载ts 支持vue 的插件
6. ts aixo的使用
7. vue X的使用
8. 图片上传（批量上传）//ts element的使用
9. 分页的使用
10. 重制按钮的分装
11. 富文本编译器
12. 表单验证

---

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
复制代码

1. 第一个是本身建立过的模版。
2. 第二个是系统默认的
3. 第三个本身选配置
   我这边有建立过一个，咱们选红色选中的这个

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

直接回车（默认赞成）

一路回车而后选择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 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性。须要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。
    crossorigin:undefined,
    // 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)。若是你构建后的文件是部署在 CDN 上的，启用该选项能够提供额外的安全性。须要注意的是该选项仅影响由 html-webpack-plugin 在构建时注入的标签 - 直接写在模版 (public/index.html) 中的标签不受影响。另外，当启用 SRI 时，preload resource hints 会被禁用，由于 Chrome 的一个 bug 会致使文件被下载两次。
    integrity:false,
    // 反向代理
    devServer:{
        // devServer: {
        //     proxy: {
        //       '/api': {
        //         target: '1',
        //         ws: true,
        //         changeOrigin: true
        //       }
        //     }
        // }
    }
}
复制代码

vue+ts基本的项目搭建就完成了

小结

内容比较多我分6个专题来写这个vu+ts+element,如中间有问题能够直接下面留言 第二集

判断是否可使用ts+vue是否支持福利连接