不好意思昨天立了flag今天要打脸了，由于vue-router 和vuex对composition做了支持，只能先配置他俩了，咱明天再学composition api
如果还没有看过第一天项目搭建的童鞋请移步，先看一下项目结构
一、配置vue-router
1、修改src目录
新建router目录，在router目录下新建index.js
新建views目录，在目录下新建RouterDemoOne.vue和RouterDemoTwo.vue
2、编写三个文件的代码
首先是vue文件的代码，如果大家使用了第一天的那个代码块可以快速生成
代码很简单，就不做说明了
RouterDemoOne.vue
<style lang="less">
</style>
<template>
<h1>RouterDemoOne</h1>
<router-link to='/RouterDemoTwo'>goRouterDemoTwo</router-link>
</template>
<script>
import {} from 'vue'
export default {
setup(){
return {
}
}
}
</script>
RouterDemoTwo.vue
<style lang="less">
</style>
<template>
<h1>RouterDemoTwo</h1>
<router-link to='/'>goRouterDemoOne</router-link>
</template>
<script>
import {} from 'vue'
export default {
setup(){
return {
}
}
}
</script>
接下是router/index.js，总的来说大体一样稍有不同
//第一个参数是用来创建路由，第二个是history模式 第三个是hash模式
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import RouterDemoTwo from '../views/RouterDemoTwo.vue';
const routes = createRouter({
history: createWebHashHistory(),//此处替换上面的参数即可更换模式，我这里暂时使用hash
routes:[
{
path: `/`,
component: () =>import('../views/RouterDemoOne.vue')
//这个就是大家熟悉的分包加载，只不过这里是vite实现的，但写法和webpack是一样的
},
{
path: `/RouterDemoTwo`,
component: RouterDemoTwo//静态引入
}
]
});
//还是熟悉的钩子
routes.beforeEach((to, from, next) => {
console.log('---routes.beforeEach---')
next()
})
export default routes;
新建文件到此结束接下来要修改两个文件来支持vue-touter
3、修改入口文件支持router
首先是main.js
import { createApp } from 'vue'
import App from './App.vue'
//此行要引入新建的router/index.js文件
import router from './router'
import 'ant-design-vue/dist/antd.min.css';//加入antd-vue
import antd from 'ant-design-vue';//加入antd-vue
//区别于之前的全局挂载router 这次直接在实例后.use(router)
createApp(App).use(router).use(antd).mount('#app')//use一下挂载到实例下成为全局组件
APP.vue 这个文件主要是加入router-view
<template>
<a-button @click="btnClick">点我</a-button>
<a-modal title="VUE3" v-model:visible="visible">
<p>{{ message }}</p>
</a-modal>
<!-- 跟之前一样加入router-view -->
<router-view />
</template>
<script>
import { ref } from "vue";
export default {
name: "App",
setup() {
const visible = ref(false);
const message = "Hello vue3";
const btnClick = () => {
visible.value = true;
};
return {
visible,
message,
btnClick
};
}
};
</script>
到此router配置结束，各位童鞋可以亲手试验一下。
二、配置vuex,vuex今天先配置上，之后的使用要配合composition，明天在详细说
1、新建文件夹及文件
src目录下新建 store文件夹
然后在store文件夹下面新建
actions.js getters.js index.js modules.js mutations.js state.js
一共六个文件，都是比较熟悉的名字 就不过多解释啦
2、编写代码index.js
import Vuex from 'vuex';
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
import modules from './modules'
const store= Vuex.createStore({
state,
getters,
mutations,
actions,
modules
})
export default store;
3、修改main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
//引入vuex
import store from '../store'
import 'ant-design-vue/dist/antd.min.css';//加入antd-vue
import antd from 'ant-design-vue';//加入antd-vue
//use一下
createApp(App).use(store).use(router).use(antd).mount('#app')//use一下挂载到实例下成为全局组件
至此vuex配置完毕，之后的使用要和compositionAPI配合使用，明天咱们一起学习
最后在安利一个我自己的小项目，准备抄个钉钉，学习一下新技术
前端技术栈 vue3+electron+vite+vuerouter+ant-design-vue+less
后端技术栈 待学习
