仿有贊後臺+vue+ts+vuecli3.0+elementUi+二期專案結構檔案搭建+以及路由的使用

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

前言

昨天寫了vue+ts+vuecli3.0第一場主要是一個vuecli搭建的內容，今天講一下vue 專案結構搭建+以及路由的使用，看了一個小夥伴 $refs 報錯問題有大佬可以回覆我一波困擾已久，伸手黨本人尋求幫助哈哈！在說這個之前我會介紹一下我寫整個這個後臺檢索的邏輯，我們搜尋的條件放到了url上面那麼重置按鈕就可以複用了，所有的搜尋條件在url優勢是可以重新整理頁面之前的操作記錄都在這樣就比較舒服，有贊就是這樣的，建議有時間的老爺5分鐘上手TypeScript 或者看完小弟的這個大概有個瞭解再去深入當前專案demo預覽（QQ群技術討論）838293023備註（github進來的）第三章

游泳健身瞭解一下：githubJQ外掛 技術文件 技術文件會持續更新

1.專案搭建

先看一波完成後的專案介紹（webstorm裡面ts不支援引入vue所有爆紅色，強迫症患者可以用vscode支援會更好）

仿有贊後臺+vue+ts+vuecli3.0+elementUi+二期專案結構檔案搭建+以及路由的使用

  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`
    }

複製程式碼