仿有贊後臺+vue+ts+vuecli3.0+elementUi

全乾大前端發表於2018-10-31
VueUI

前言

最近嘗試了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
複製程式碼

仿有贊後臺+vue+ts+vuecli3.0+elementUi

  1. 第一個是自己建立過的模版。
  2. 第二個是系統預設的
  3. 第三個自己選配置
    我這邊有建立過一個，我們選紅色選中的這個

仿有贊後臺+vue+ts+vuecli3.0+elementUi

我們這樣選擇。空格鍵是否選中，上下選擇

仿有贊後臺+vue+ts+vuecli3.0+elementUi

直接回車（預設同意）

仿有贊後臺+vue+ts+vuecli3.0+elementUi

一路回車然後選擇package.json 看下我們選擇了啥ts 然後sass 語法檢查esl

然後再回車就進行最後的cli專案的下載了。耐心等待

仿有贊後臺+vue+ts+vuecli3.0+elementUi

仿有贊後臺+vue+ts+vuecli3.0+elementUi

我們下載好了

# 輸入
vue ui
複製程式碼

仿有贊後臺+vue+ts+vuecli3.0+elementUi

歡迎來到vuecli3.0 圖形話介面，現彆著急現看我們的專案檔案結構

2.vue config檔案配置

下面是我們的檔案的結構

仿有贊後臺+vue+ts+vuecli3.0+elementUi

  ##  檔案介紹
 
 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+vuecli3.0+elementUi

仿有贊後臺+vue+ts+vuecli3.0+elementUi

仿有贊後臺+vue+ts+vuecli3.0+elementUi

vue+ts基本的專案搭建就完成了

小結

內容比較多我分6個專題來寫這個vu+ts+element,如中間有問題可以直接下面留言 第二集

判斷是否可以使用ts+vue是否支援福利連結

相關文章