仿有贊後臺+vue+ts+vuecli3.0+elementUi+二期專案結構檔案搭建+以及路由的使用
昨天寫了 vue + ts + vuecli3.0 第一場主要是一個 vuecli 搭建的內容，今天講一下 vue 專案結構搭建+以及路由的使用，看了一個小夥伴 $refs 報錯問題有大佬可以回覆我一波困擾已久，伸手黨本人尋求幫助哈哈！在說這個之前我會介紹一下我寫整個這個後臺檢索的邏輯，我們搜尋的條件放到了url上面 那麼重置按鈕就可以複用了，所有的搜尋條件在url優勢是可以重新整理頁面之前的操作記錄都在這樣就比較舒服，有贊就是這樣的，建議有時間的老爺5分鐘上手TypeScript 或者看完小弟的這個大概有個瞭解再去深入
游泳健身瞭解一下： ofollow,noindex"> github
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完整的後臺會搞出來然後會出一個基礎版本各位老爺點個贊:+1:
