1、运行创建项目命令
# 使用 npm
npm create vite@latest
# 使用 yarn
yarn create vite
# 使用 pnpm
pnpm create vite
剩下的就是启动以及一些配置信息
2、vite+vue3路由配置信息
npm install vue-router@4
在src目录下新建目录叫“router”,新建一个js文件叫“index.js”,文件内容如下:
// 导入router所需的方法
import { createRouter, createWebHistory } from 'vue-router'
const routes = [{path: '/',name: 'index',title: '首页',component: () => import('../view/Index.vue'), //.vue不能省略}
]
// 路由参数配置
const router = createRouter({// 使用hash(createWebHashHistory)模式,(createWebHistory是HTML5历史模式,支持SEO)history: createWebHistory(),routes: routes,
})// 全局前置守卫,这里可以加入用户登录判断
router.beforeEach((to, from, next) => {// 继续前进 next()// 返回 false 以取消导航next()
})// 全局后置钩子,这里可以加入改变页面标题等操作
router.afterEach((to, from) => {const _title = to.meta.titleif (_title) {window.document.title = _title}
})// 导出默认值
export default router
在main.js里启用路由
import router from './router/index'
createApp(App)
.use(router)
.mount('#app')
app.vue文件修改成路由的形式
3、使用pinia状态管理
安装命令
npm install pinia// 引入并创建pinia实例
import { createPinia } from 'pinia'
const pinia = createPinia()createApp(App).use(router).use(pinia).mount('#app')
在src下创建store目录文件
并且模块化
store/index.js
import useHeaderStore from './Header/header'
// import xxx from './xxx'// 统一导出方法
export default function useStore() {return {Headers: useHeaderStore(),//xxx: xxx()}
}
store/Header/heade.js
import { defineStore } from 'pinia'// 参数1 唯一标识
// 参数2 配置对象
const useHeaderStore = defineStore('Headers', {// 状态state() {return {name: '张三',age: 18,}},// 状态数据计算属性 相当于computedgetters: {doubleAge() {return this.age * 2}},// 修改状态 同步异步都可修改actions: {addAge() {this.age++},minusAge() {this.age--}}
})// 导出
export default useHeaderStore
在组件中使用
<template><div class="index">首页-{{ Headers.name }}-{{ Headers.age }}-{{ Headers.doubleAge }}<button @click="Add">增加</button><button @click="Reduce">减少</button></div>
</template><script setup>
import { ref } from 'vue'
import useStore from '../store/index'
const { Headers } = useStore()
const Add = () => {console.log(123123)Headers.addAge()
}
const Reduce = () => {Headers.minusAge()
}
</script><style lang="scss" scoped>
.index {width: 100%;height: 100%;
}
</style>
(后续更新中…)