2. 用Vue與C# .net MVC做前後端分離之Todo List(前端部分)

/api

跟後端API的介接，資料交換集中放置在此

/assets

網頁需要用到的靜態擋放置在此

/components

組件集中放置在此
VueTemplate.vue
- 空的範例組件
Nav.vue
Board.vue
- 包含了Todo List跟Done List
- 可以透過props來控制此board可否編輯
TodoList.vue
- Todo List跟Done List所使用到之組件
- 裡面可以放置/移動task
- 使用第三方套件Draggable來實現移動task
- 可以透過props來控制此list可否編輯
Task.vue
- 最基本的task組件
- 可以觀看/編輯一個task之Title與Content
- 可以透過props來控制此task可否編輯

/route

當網址對應之組件比較複雜後，有些邏輯可以放到這邊，像是有些網址須要登入才可訪問，相關權限處理

/store

vuex本身有model化的用法，可以透過namespace來讓資料物件化/模組化
store可以放置這些物件化/模組化之js檔

/views

這邊定義了各網址應該對應到的組件
NoBackendHome.vue
- 僅能觀看task
- 不需後端
- 資料儲存在$store.state.localBoard，即/src/store/localBoard.js
NoBackendEdit.vue
- 可以觀看/編輯task
- 不需後端
- 資料儲存在$store.state.localBoard，即/src/store/localBoard.js
Home.vue
- 修改自NoBackendHome.vue
- 多了從後端拿資料存進$store.state.remoteBoard的動作
- 資料儲存在$store.state.remoteBoard，即/src/store/remoteBoard.js
Edit.vue
- 修改自NoBackendEdit.vue
- 多了從後端拿資料存進$store.state.remoteBoard的動作
- 資料儲存在$store.state.remoteBoard，即/src/store/remoteBoard.js
PageNotFound.vue
- 當網址無法對應到router中之規則時，故定回傳此組件

App.vue

整個組件的root，原點
<router-view/>宣告了各網址的內容應該在此tag內進行render

main.js

整個vue運作的原點
有些第三方套件的使用必須在這邊宣告，像是Vue.use(VModal)

如果專案要使用router，vuex，也必須在new Vue時傳入參數

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// import 第三方套件
import VModal from 'vue-js-modal'

Vue.config.productionTip = false
// 使用'vue-js-modal'這個第三方套件
Vue.use(VModal)

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

router.js

定義網址對應之組件

store.js

vuex store之root/原點

開新專案

`vue create your-project-name`

Vue cli 相關文章

專案結構

開發環境

啟動

使用輔助開發工具

開發

安裝第三方套件

/src結構

編譯(Build)

接下來