vue3+vite创建项目--（傻瓜式教程）

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>