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