使用Vite创建Vue3项目并配置路由和Pinia

使用Vite创建Vue3项目并配置路由和Pinia

引用

CSDN

1.

https://blog.csdn.net/2302_78387246/article/details/137273916

本文将介绍如何使用Vite创建Vue3项目，并配置路由和Pinia状态管理。

第一节：创建Vue3项目

1. 打开命令行窗口，进入项目文件目录
2. 执行 npm init vite@latest 命令，根据提示进行选择：

• 确认创建
• 填写文件名
• 选择框架（Vue3）
• 选择使用JS还是TS

3. 完成上述步骤后，项目文件夹将被创建。使用VSCode打开文件夹，在终端中运行以下命令：

• npm install 安装依赖
• npm run dev 启动项目

第二节：配置路由

1. 安装Vue Router：npm install vue-router@4
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. 在main.js中配置路由：

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>

第三节：测试路由

启动项目后，由于路由配置指向HelloWorld.vue页面，因此页面将显示该组件的内容。

第四节：配置Pinia

1. 安装Pinia：npm install pinia
2. 在main.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. 在组件页面中使用Pinia：

<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'

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>

第五节：测试Pinia

1. 打开页面，初始显示count为10，double为20
2. 点击按钮两次后，count变为12，double变为24

完成以上内容，项目的基本功能就搭建完成了。接下来可以根据需求添加其他插件，如Less、Element UI等。