vite+vue3（vuex、vuerouter、axios）+elementplus项⽬保姆
教程
简单来说就是记录⼀下怎么从0开始搭建⼀个vue3+vite+elementplus的项⽬,
本⽂详细记录了每⼀步的代码\控制台和⽂件操作，包括项⽬搭建\安装vuerouter\安装vuex\安装axios和⼀些发版前准备⼯作,
可以说是保姆级教程了，喜欢可以收藏⼀下,
有问题⼤家⼀起在评论区探讨
⽬录
1.创建并初始化项⽬
控制台输⼊
npm init vite@latest
然后⾃⼰填下项⽬名称和项⽬框架 这⾥我还是选择js的，感兴趣ts的朋友可以⾃⼰了解下，也不复杂
cd进项⽬⽬录后install⼀下就可以run起来了
为了⽅便后⾯修改啥的，再加上我这个⼈⽐较懒，就去设置⼀下run之后⾃动默认浏览器打开在package.json⾥进⾏如下修改
{
"name": "a-project",
"version": "0.0.0",
"scripts": {
"dev": "vite --open",//改了这⼀⾏添加了--open
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.2.25"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.0.0",
"vite": "^2.7.2"
}
}
然后清理⼀下 把默认的内容都清空了，留⼀个主页logo就可以了
<script setup>
</script>
<template>
<img alt="Vue logo" src="./assets/logo.png" />
</template>
<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>
推荐⽤vscode的各位使⽤  Vue Language Features (Volar) 这个插件 ⽐较好⽤2.安装使⽤vue-router
npm install vue-router@4
然后新建如下⽂件⽤于配置和测试路由
配置路由页⾯index
import {
createRouter,
createWebHistory
} from 'vue-router'
const routerHistory = createWebHistory()
const router = createRouter({
history: routerHistory,
routes: [{
path: '/',
}, {
path: '/foo',
component: () => import('../views/foo.vue')    }, {
path: '/bar',
component: () => import('../views/bar.vue')    }]
})
export default router
测试页⾯foo.vue/bar.vue
<template>
<div>this is foo page</div>
</template>
<script setup>
</script>
<style>
</style>
app.vue页⾯进⾏如下修改
<script setup>
import {
useRouter
} from 'vue-router'
const router = useRouter()
function toFoo() {
router.push({
path: '/foo'
})
}
function toBar() {
router.push({
path: '/bar'
})
}
</script>
<template>
<div>
vue element admin
<img alt="Vue logo" src="./assets/logo.png" />  </div>
<button @click="toFoo">to foo</button>
<button @click="toBar">to bar</button>
<router-view></router-view>
</template>
<style>
#app {
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
然后在main.js⾥引⼊
import {
createApp
} from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router).mount('#app')
那么测试下效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。