# vite-vue-app

**Repository Path**: jxmlearner/vite-vue-app

## Basic Information

- **Project Name**: vite-vue-app
- **Description**: vite2.x学习vue3
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-05-13
- **Last Updated**: 2021-05-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

`yarn create @vitejs/app vite-vue-app --template vue`

1. `yarn add sass`
2. 引入全局变量和定义路径别名 `vite.config.js`
```js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    },
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `@import "./src/styles/variables.scss";`
            }
        }
    }
})
```

3. 安装路由 `yarn add vue-router@4`

注册路由 `//src/router/index.js`
```js
import { createRouter, createWebHashHistory } from "vue-router"

const routes = [
    { 
        path: '/', 
        component: () => import('@/views/Home.vue'),
        children: [

        ]
    },
    { path: '/login', component: () => import('@/views/Login.vue') },
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router
```

4. 安装`element-plus`: `yarn add element-plus`
+ [elment-plus官方站点](https://element-plus.gitee.io/#/zh-CN) 
+ 自定义element-plus的一些变量值 `//src/styles/element-variables.scss`
```scss
/* 改变主题色变量 */
$--color-primary: #027AFF;
/* 改变 icon 字体路径变量，必需 */
// $--font-path: '~element-plus/lib/theme-chalk/fonts';
// @import "~element-plus/packages/theme-chalk/src/index";

$--font-path: 'element-plus/lib/theme-chalk/fonts';
@import "element-plus/packages/theme-chalk/src/index";
```
+ `main.js`中引入并使用 `element-plus`
```js
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"
import ElementPlus from 'element-plus'
import '@/styles/element-variables.scss'
import '@/styles/style.scss'

createApp(App).use(router)
.use(ElementPlus, { size: 'small', zIndex: 3000 }).mount('#app')

```

5. 登录表单示例
```js
<script>
import { ref, reactive } from 'vue'
import { useRouter } from "vue-router"

export default {
    setup () {
        const router = useRouter()
        const loginFormRef = ref(null)

        const loginForm = reactive({username: '', pass: ''})
        const rules = reactive({
            username: [
                { required: true, message: '用户名不能为空' }
            ],
            pass: [
                { required: true, message: '密码不能为空' }
            ]
        })
        const submitForm = async () => {
            const {username, pass} = loginForm
            console.log(username, pass)
            loginFormRef.value.validate().then(() => {
                router.replace('/')                
            }).catch(() => {
                console.log('表单数据未通过校验')
            })
        }
        return {
            loginForm,
            loginFormRef,
            rules,
            submitForm
        }
    }
}
</script>
```

6. 计算属性和watch
```js
<template>
    <div>
        computed和watch在composition api下使用
    </div>
    <h2>计算属性, 原始值：{{count}}, 计算后：{{plusOne}}</h2>
    <div>
        watch: {{state.count}} <el-button @click="updateCount">更新state.count的值</el-button>
    </div>
</template>

<script>
import { ref, computed, reactive, watch } from 'vue'
export default {
    setup () {
        const count = ref(1)
        const plusOne = computed(() => count.value + 1)

        const state = reactive({ count: 0 })
        const updateCount = () => {
            const random = Math.floor(Math.random() * 10 + 1)
            state.count = random
        }
        watch(
            () => state.count, 
            (count, prevCount) => {
                console.log('执行watch,当前值：', count)
            },
            {
                immediate: true
            }
        )
        return {
            count,
            plusOne,
            state,
            updateCount
        }
    }
}
</script>

<style lang="scss" scoped>

</style>
```

7. 封装axios网络请求
+ `yarn add axios nprogress`
+ 参考：https://blog.csdn.net/sinat_34209942/article/details/114022885
+ `vite.config.js`中配置代理
```js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    },
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `@import "./src/styles/variables.scss";`
            }
        }
    },
    server: {
        proxy: {
            // 选项写法
            '/api': {
                target: 'https://dog.ceo/api/',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
    }
})
```
+ 封装 `axios` 请求成 `request`
```js
import axios from 'axios'
import { ElMessage } from 'element-plus'
// import NProgress from 'nprogress'
// import 'nprogress/nprogress.css'

const createService = (baseUrl = '') => {
    // 创建 axios 实例
    const baseURL = baseUrl || import.meta.env.VITE_APP_BASE_API

    const service = axios.create({
        baseURL,
        timeout: 50000
    })

    // request拦截器（主要是携带上token）
    service.interceptors.request.use(config => {
        config.headers['key'] = 'headerValue'
        return config
    }, error => {
        console.log(error)
        return Promise.reject(error)
    })

    service.interceptors.response.use(response => {
        return response.data
    }, error => {
        console.log('err' + error)
        if (error.response) {
            const errorMessage = error.response.data === null ? '系统内部异常，请联系网站管理员' : error.response.data.message
            switch (error.response.status) {
                case 404:
                    ElMessage({
                        message: '很抱歉，资源未找到' || 'Error',
                        type: 'error',
                        duration: 5 * 1000
                    })
                    break
                case 403:
                    ElMessage({
                        message: '很抱歉，您暂无该操作权限' || 'Error',
                        type: 'error',
                        duration: 5 * 1000
                    })
                    break
                case 401:
                    ElMessage({
                        message: '很抱歉，认证已失效，请重新登录' || 'Error',
                        type: 'error',
                        duration: 5 * 1000
                    })
                    break
                default:
                    if (errorMessage) {
                        ElMessage({
                            message: errorMessage,
                            type: 'error',
                            duration: 5 * 1000
                        })
                    }
                    break
            }
        }
        return Promise.reject(error)
    })

    return service
}

const request = createService()

export { createService }
export default request
```

8. vue3学习参考：https://blog.csdn.net/qq_25506089/article/details/114743592

9. vue3中使用事件总线
https://blog.csdn.net/fuweipeng2012/article/details/113812794
+ `yarn add mitt`
+ 新建自己的eventBus
```js
import mitt from 'mitt'
export default mitt()
```
+ 使用
```js
import mitt from '@/utils/eventbus.js'
export default {
    setup () {
        const dogs = ref([])

        mitt.on('foo', e => console.log('foo', e) )

        onMounted (() => {
            dogApi.getDogs().then(res => {
                console.log(res)
                if (res.status === 'success') {
                    dogs.value = res.message
                }
            })
            mitt.emit('foo', { a: 'b' })
        })
        return {
            dogs
        }
    }
}
```

10. vuex4使用
+ `yarn add vuex@next`
+ `src/store/index.js`
```js
import { createStore } from 'vuex'
import setting from './modules/setting.js'

// 创建一个新的 store 实例
const store = createStore({
    modules: {
        setting
    }
})

export default store
```
+ `setting`模块 `src/store/modules/setting.js`
```js
export default {
    state: {
        sideMenu: { // 左侧菜单是否打开
            opened: true
        }
    },
    mutations: {
        toggleSideMenu (state, payload) { // 切换左侧菜单的显示和隐藏
            console.log('提交toggleSideMenu', payload)
            state.sideMenu.opened = payload
        }
    }
}
```
+ `main.js`
```js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
import ElementPlus from 'element-plus'
import locale from 'element-plus/lib/locale/lang/zh-cn'
import '@/styles/element-variables.scss'
import '@/styles/style.scss'

createApp(App).use(store).use(router)
.use(ElementPlus, { size: 'small', zIndex: 3000, locale }).mount('#app')

```
+ 页面使用
```js
import { ref, computed } from 'vue'
import { useStore } from 'vuex'

export default {
    setup() {
        const store = useStore()
        // const isCollapse = ref(false)
        const isCollapse = computed(() => !store.state.setting.sideMenu.opened)
        return {
            isCollapse,
            toggleSideMenu: () => {
                store.commit('toggleSideMenu', isCollapse.value)
            }
        }
    }
}
```