仿有贊後臺+vue+ts+vuecli3.0+elementUi+二期項目結構文件搭建+以及路由的使用

前言

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

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

---

1.項目搭建

先看一波完成後的項目介紹（webstorm裏面ts不支持引入vue全部爆紅色，強迫症患者能夠用vscode支持會更好）

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

複製代碼

可能您仍是不懂建議看下官方文檔vue-property-decorator這裏就不詳細贅述了，因爲本人比較愚鈍（伸手黨一枚）

小結

下面送上項目成功後的樣子（明天應該會詳細講解一下本ui總體的搭建以及插件的使用）具體的插件的文檔會近期更新上

後面會有一個基於element+ts完整的後臺會搞出來而後會出一個基礎版本各位老爺點個贊👍

第三章