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

前言

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

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


1.項目搭建

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

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的插件git

## 最主要到是這3個
1.   aixo
2.   element
3.   js-cookie
複製代碼

看下package.js 能夠看到咱們當前到依賴 github

而後咱們去下載當前到依賴web


福利篇

教你如何看插件是否可使用當前到vue + ts項目(當前ts+vue仍是比較少) TypeSearch
若是和下面的圖同樣能搜索出來的基本能夠判斷支持ts ajax


下載當前項目依賴

咱們打開當前圖形管理工具 vuex

選擇而後下載(還要下載當前 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這裏就不詳細贅述了,因爲本人比較愚鈍(伸手黨一枚)typescript

小結

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

後面會有一個基於element+ts完整的後臺會搞出來而後會出一個基礎版本各位老爺點個贊👍
第三章
相關文章
相關標籤/搜索