[JavaScript知识库]Vue3学习笔记

1 安装Vue

# 安装Vue3
npm install vue@next
# 安装Vuex
npm install vuex@next
# 安装Vue-router
npm install vue-router@4

2 Vue3项目结构

2.1 assets

存放静态资源。比如图片，视频等。

2.2 componets

存放自定义的组件。

2.3 router

路由。
router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'

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

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

export default router

2.4 store

状态。
最简单的状态管理只有一个js文件。里面定义了state、mutations、actions、getters等。

• state存放变量
• mutations对变量进行操作。
• actions中调用mutations方法操作变量，具体地store.commit('mutationsName',value)。然后外部通过store.dispatch('actionName',value)修改state,通过store.dispatch('actionName)读取值。如果action方法中定义了get和set方法的话。一般用actions来修改state。
• getters专门用来访问state中定义的变量。通过在getters中定义变量的getter方法，外部可以通过store.getters['getterName']来读取state中变量的值。

在大型项目中，state如果在一个文件中管理，会难以维护，如果分成不同的modules分别维护不同功能模块的state，就会非常方便。因此。在state中除了上述之外，还有modules，用来引用不同模块的state文件。例如：

store/index.js

import { createStore } from 'vuex'
// import axios from 'axios'
import getters from '@/store/getters'
import user from '@/store/modules/user'

const store = createStore( {
    modules:{
        user
    },
    state: {
        userInfo: {name:"123",sex:"男"}, 
    },
    getters,
    mutations: {
        setUser:(state, userInfo) =>{
            state.userInfo = userInfo
        }
    },
    actions: {
        SetUser({commit}) {
            commit('setUser',{name:'1234',sex:'女'})
        }
    }
})

export default store

在module中，namespaced用来设置是否开启命名空间。

• 当值为false的时候，module中的getters、actions会直接注册到store中。
  store/modules/user/index.js
• 当值为true的时候，访问module中的getters和actions需要加上module名称
  例如:
  • 访问user中的SetUser action:
    store.dispatch('user/SetUser',{name:'1234',sex:'女'}
  • 访问user中的 GETUSER getters:
    store.getters['user/GETUSER']

import getters from './getters'
const user = {
    namespaced:true,
    state:{
        userInfo:{
            name:'hello',
            sex:'man'
        }
    },
    mutations:{
        setName:(state, name)=>{
            state.userInfo.name=name
        }
    },
    getters,
    actions:{
        SETNAME:({commit},name)=>{
            commit('setName',name)
        }
    },

}

export default user

store/modules/user/getters.js

const getters = {
    GETNAME(state){
        return state.userInfo.name
    }
}

export default getters

2.5 views

存放vue文件。存放所有页面的vue文件。在router中进行引用。

2.6 App.vue

主vue文件。示例代码如下所示。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {}
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2.7 main.js

主js文件。示例代码如下所示。
通过createApp函数创建Vue对象。引入store、router和权限控制。

import { createApp } from 'vue'
import App from './App.vue'
import store from '@/store'
import router from '@/router'
import '@/permission'

createApp(App)
    .use(router)
    .use(store)
    .mount("#app")

2.8 permission.js

权限控制。示例代码如下所示。定义了在每次跳转之前的钩子，用来拦截路由跳转，进行权限校验。

import router from '@/router'

router.beforeEach((to, from) => {
    console.log('from: '+from.path+'   to: '+to.path)
    return true
})

3 启动项目