# Vue

# 【Vue】相關連結

- [前言 | 重新認識 Vue.js | Kuro Hsu](https://book.vue.tw/preface.html#%E7%82%BA%E4%BB%80%E9%BA%BC%E8%A6%81%E5%AF%AB%E9%80%99%E6%9C%AC%E6%9B%B8)
- [\[ 重構倒數30天，你的網站不Vue白不Vue \] :: 2021 iThome 鐵人賽](https://ithelp.ithome.com.tw/users/20125854/ironman/4112)
- [Vue.js 進階心法 :: 2021 iThome 鐵人賽](https://ithelp.ithome.com.tw/users/20107637/ironman/4510)
- [介绍 | Vue Router (vuejs.org)](https://router.vuejs.org/zh/introduction.html)

---

- [【UI】Why Quasar? | Quasar Framework](https://quasar.dev/introduction-to-quasar)
- [【UI】Element Plus (element-plus.org)](https://element-plus.org/en-US/#/zh-CN)
- [【UI】vuetifyjs](https://vuetifyjs.com/)

---

# vue

```
routes:[
        {
            path: '/login',
            name: 'login',
            component: loginPage,
            beforeEnter: (to, from, next) => {
                Store.dispatch('role/getMe').then(response => {
                    next()
                })
            }
        },
]



===========================================================================



import Vue from 'vue'
import Vuex from 'vuex'
import sms from './modules/sms'
import role from './modules/role'
import group from './modules/group'
import permission from './modules/permission'

Vue.use(Vuex)

const store = new Vuex.Store({
    modules: {
        sms: sms,
        role: role,
        group: group,
        permission: permission
    }
})

export default store



===========================================================================



import axios from 'axios'

const state = {
    permissionList: [],
    permissionDropdownList: [],
    permissionDetail: {}
}

const actions = {
    async getList ({ commit }, params) {
        try {
            const { data: { data, total } } = await axios.get(`api/permissions`, { params })
            commit('SET_PERMISSION_LIST', {
                data,
                total: total
            })
        } catch (err) {
            console.log('get list', err)
        }
    },

    async getDropdownList ({ commit }, params) {
        try {
            const { data: { data, total } } = await axios.get(`api/permissions/dropdownlist`, { params })
            commit('SET_PERMISSION_DROPDOWNLIST', {
                data,
                total: total
            })
        } catch (err) {
            console.log('get dropdown list', err)
        }
    },

}

const mutations = {
    SET_PERMISSION_LIST (state, permissions) {
        state.permissionList = permissions.data
    },
    SET_PERMISSION_DROPDOWNLIST (state, permissions) {
        state.permissionDropdownList = permissions.data
    },
    SET_PERMISSION_DETAIL (state, permission) {
        state.permissionDetail = permission.data.data
    },
}

export default {
    namespaced: true,
    state,
    mutations,
    actions
}

```

# Vue 建立專案

```shell
# install vue cli
npm install -g @vue/cli

# 建立 my-project 專案
vue create my-project
```

選第三個

[![image-1639309733425.png](https://bookstack.treemanou.com/uploads/images/gallery/2021-12/scaled-1680-/YUPzMeOFkomgzycR-image-1639309733425.png)](https://bookstack.treemanou.com/uploads/images/gallery/2021-12/YUPzMeOFkomgzycR-image-1639309733425.png)

按下空白選取或是取消組件，Enter

[![image-1639309818548.png](https://bookstack.treemanou.com/uploads/images/gallery/2021-12/scaled-1680-/qFa6it1gDojBszWB-image-1639309818548.png)](https://bookstack.treemanou.com/uploads/images/gallery/2021-12/qFa6it1gDojBszWB-image-1639309818548.png)

選擇vue版本 -> 3.X

[![image-1639309891104.png](https://bookstack.treemanou.com/uploads/images/gallery/2021-12/scaled-1680-/Zdx2f4Pim4V8kc6V-image-1639309891104.png)](https://bookstack.treemanou.com/uploads/images/gallery/2021-12/Zdx2f4Pim4V8kc6V-image-1639309891104.png)

Yes -> Sass/SCSS( with node-sass) -> Inpackage.json -> Yes -> Enter

[![image-1639310052473.png](https://bookstack.treemanou.com/uploads/images/gallery/2021-12/scaled-1680-/rPL3QOEEgG9ehfYU-image-1639310052473.png)](https://bookstack.treemanou.com/uploads/images/gallery/2021-12/rPL3QOEEgG9ehfYU-image-1639310052473.png)

進入目錄 -> 起測試服務

```shell
# 進入專案目錄
cd vue-demo
# 起測試服務
npm run serve
```

[![image-1639310212824.png](https://bookstack.treemanou.com/uploads/images/gallery/2021-12/scaled-1680-/wT37lPD4O1dpgrte-image-1639310212824.png)](https://bookstack.treemanou.com/uploads/images/gallery/2021-12/wT37lPD4O1dpgrte-image-1639310212824.png)