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

第一节：创建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博客