使用vite创建vue3项目 + 配置路由 + 配置pinia

科技前沿 • 2025-02-08 09:23 • 阅读 50

大家好，我是讯享网，很高兴认识大家。

第一节：创建vue3项目

viet官方文档：Vite | 下一代的前端工具链 (vitejs.cn)

1.在项目文件目录下执行cmd到命令行窗口

2.执行 npm init vite@latest 命令跳出以下提示

3.根据提示进行选择，首先是确认创建，然后填写文件名，再选择框架，最后选择用js还ts

讯享网

4.完成这几步我们的项目文件夹就出现了，用vscode打开文件夹，到终端输入 npm install 安装依赖，然后再运行 npm run dev启动项目

第二节：配置路由

官方文档：Vue Router | Vue.js 的官方路由 (vuejs.org)

1.npm install vue-router@4 安装路由router

2.新建router文件夹，在该文件夹下面创建index.js，然后赋值以下代码

import { createRouter, createWebHistory } from 'vue-router' const routes = [ { //路由初始指向 path: '/', name: 'HelloWorld', component: () => import('../components/HelloWorld.vue'), } ] const router = createRouter({ history: createWebHistory(), routes }) export default router

讯享网

3.在mian.js对router进行配置

讯享网import { createApp } from 'vue' import './style.css' import App from './App.vue' import router from './router' const app = createApp(App); app.use(router).mount('#app')

4.在App.vue中，添加路由出口(多余的代码删除了)

<template> <div> <router-view></router-view> </div> </template> <script setup> </script> <style scoped> </style>

第三节：测试路由

查看效果，因为路由配的的是helloword.vue的页面，所以展示就是这个页面

配置成功

第四节：配置pinia

官方文档：Pinia | The intuitive store for Vue.js (vuejs.org)

1. 先 npm install pinia 安装

2.在mian.js里面配置pinia

讯享网import { createApp } from 'vue' import './style.css' import App from './App.vue' import router from './router' import { createPinia } from 'pinia' const pinia = createPinia() const app = createApp(App); app.use(router) app.use(pinia) app.mount('#app')

3.创建store文件夹，添加index.js文件，复制以下代码

import { defineStore } from 'pinia' export const useCounterStore = defineStore('counter', { state: () => ({ count: 10 }), getters: { double: (state) => state.count * 2, }, actions: { increment() { this.count++ }, }, })

4.在组件页面进行使用

讯享网<template> <div style="font-size: 30px;"> HelloWorld的页面 </div> <div> { 
  
    
  { store.count }} </div> <div> { 
  
    
  {store.double }} </div> <div> <button @click="store.increment">按钮点击调用increment方法</button> </div> </template> <script setup> import { useCounterStore } from '../stores' // 可以在组件中的任意位置访问 `store` 变量 ✨ const store = useCounterStore() console.log(store); console.log(store.count); // count 10 console.log(store.double); // double 10*2=20 </script> <style lang = "less" scoped> </style>../stores

第五节：测试pinan

1.打开页面效果如下：

2.点击两下按钮调用方法：变成12和24

完成以上内容，项目基本的主要功能就有了，还有些其他的插件，比如less，element，ant等，大家根据需求下载就行了，之后我们就可以开始进行代码的书写了，祝大家安装顺利！

其他好文章推荐（小白必看）：好好学习、天天向上

【前端】- 在使用Element UI 的el-tree组件时，从底层去研究如何去实现一键展开/关闭【tree节点】的功能-CSDN博客

（入门级）开发第一个Java程序，只需要跟着做一遍就能理解Java程序运行的原理了-CSDN博客

WebApi发布到IIS服务器的流程-详细解析-百分之百成功_webapi服务器-CSDN博客