仿有贊後臺+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是否支持福利連接