vue3-vite-less-配置别名-多环境_链接地址
pinia 使用详解
先使用vite创建vue3项目模板

安装Vue Router(vue路由)

vueRouter官网传送门初学者，建议多看官网，vue全家桶中文官网做的都非常好

npm install vue-router@版本号， 如果不添加版本号，默认安装最新稳定版。
安装完成之后，就可以在package.json里面找到

简单的路由使用

1.在scr文件夹下面新建一个route文件夹，在router文件夹下面新建index.ts。
如下

// 导入vue-router 并命名为VueRouter
import * as VueRouter from "vue-router"
// 直接使用 @/View/Login 是因为我们配置是 src的别名为@
import Login from "@/view/Login.vue"

const routes = [
                // 请求重定向，没有路由的都默认跳转登录界面
    {path: '/', redirect: 'login'},
    {path: '/login', component: Login}
]
//创建router
const router = VueRouter.createRouter({
    //使用hash模式
    history: VueRouter.createWebHashHistory(),
    routes,
})
export default router;

需要在scr下面新建一个view文件夹，并在文件夹中创建Login.vue文件
在main.ts 里面引入上面创建的 router

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 导入router/index.ts里面导出的router
import router from "@/router"
createApp(App)
//使用router
.use(router)
.mount('#app')

这样一个简单的hash模式下的路由就配置好了，运行项目就可以看到自动跳转到login界

路由传参（参数的时候，可以把参数放到props里面去，方便使用，下面的案例都把参数放到props里面的）

使用query传参(url后面拼接?name=王二狗&password=123212)

在view文件夹下新建一个Welcome.vue文件
其中script中的代码如下， props直接获取参数也比较方便，但需要在路由中配置props: (route: any) => ({ …route.query})},

<script lang="ts" setup>
import { onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
// 定义props接收的内容
const props = defineProps({
    name: String,
    password: String,
});
const route = useRoute();
const router = useRouter();
// onMounted 钩子函数，对应vue2 mounted
onMounted(()=> {
    //使用props接受参数
    console.log(props);
    // 通过route.query接受参数
    console.log(route.query);
    
    
})
</script>

在scr/router/index.ts，增加Welcome.vue的路由配置,配置路由的时候，把query里面的传参转到props，这样Welcome里面定义props之后，可以通过props获取参数

const routes = [
                // 请求重定向，没有路由的都默认跳转登录界面
    {path: '/', redirect: 'login'},
    {path: '/login', component: Login},
 										   // 将query中的参数转换为props传递
    {path: '/wellcom', component: Welcome, props: (route: any) => ({ ...route.query})},
]

修改在login中跳转路由，并带参数

// setup 中使用router 或 route需要使用 useRouter() 或 useRoute()方法获取
import { useRouter } from 'vue-router';
const router = useRouter();
// 路由跳转，并query传参
router.push({path: '/wellcom', query: {name: "王二狗", passwordf: "qazwsxedc", phone: "21213231255"})

出发跳转之后，查看控制台

welcome中只打印了name 和 password，没有phnoe，因为props中没有定义接受phone

使用url传参(参数去url中的，而不是url 问号后面拼接的)

将scr/router/index.ts中的routes改造一下，Welocome的path改成如下

{path: '/wellcom/:id', component: Welcome, props: true},

welcome.vue中的defindProps增加一个id属性

<template>
    <div>
        欢迎来到英雄联盟
    </div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
// 定义props接收的内容
const props = defineProps({
    name: String,
    password: String,
    id: String,
});
const route = useRoute();
const router = useRouter();
// onMounted 钩子函数，对应vue2 mounted
onMounted(()=> {
    //使用props接受id
    console.log(props);
    // 通过route.params接受id
    console.log(route.params);
    
    
})
</script>

在跳转到Welcome.vue路由的地方使用router.push({path: ‘/wellcom/9527’, query: data})

<template>
<div class="login">
    <div class="card">
   <el-form
    :label-position="'right'"
    label-width="100px"
    :model="formData"
    style="max-width: 460px"
    :rules="rules"
    ref="form"
  >
    <el-form-item label="用户名" prop="name">
      <el-input v-model="formData.name" />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="formData.password" type="password" autocomplete="off"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit(form)">登录</el-button>
    </el-form-item>
  </el-form>

    </div>
</div>
</template>
<script lang="ts" setup>
import { FormInstance, FormRules } from 'element-plus';
import {reactive, ref, toRefs} from 'vue';
    const formData = reactive({
        name: "",
        password: "",
    });
    const form = ref<FormInstance>()
    const rules = reactive<FormRules>({
        name: [
            {required: true, message: "请输入用户名", trigger: 'blur'},
        
        ],
        password: [
            {required: true, message: "请输入密码", trigger: 'blur'},
            {min: 8, max: 16, message: "密码的长度在9到16之间", trigger: 'blur'},
            {type: 'string', pattern: /^[a-zA-Z]+$/, message: "密码必须为字母", trigger: 'change'},
        ]
    })
    import { useRouter } from 'vue-router';
    const router = useRouter();
    //点击提交按钮
    const onSubmit = async(form: FormInstance|undefined) => {
        if (!form) return
        // 校验
        await form.validate((valid, fields) => {
        if (valid) {
            let data = {...formData, phone: '1232324323'}
            // 路由跳转到welcome
           router.push({path: '/wellcom/9527', query: data})
        } else {
            console.log('error submit!', fields)
        }
        })
    }
    
</script>

效果如下

安装pinia并引入项目

vue3官网 将vue的数据仓库由vuex 改成了 pinia， 为了跟上时代的潮流，这个地方也使用pinia。
安装 npm install pinia， 前往官网查看兼容的版本
新建项目，可以直接使用最新稳定版，不用管版本问题。
安装完成之后，在scr下新建store/index.ts
里面代码如下：

import { defineStore, createPinia } from "pinia";
// 创建pinia
export const store = createPinia();

在main.ts 中导入 src/store/index.ts下面的导出的sore，代码如下

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "@/router"
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 导入store
import { store } from './store'
createApp(App)
.use(router)
.use(store)
.use(ElementPlus)
.mount('#app')

使用pinia

在新建的src/sotre/index.ts中 使用defineStore 定义不同的数据

/**
 *  defineStore 第一个参数，实际项目中建议定义成枚举类型
 * 实际项目中，定义不同的store用不同的文件分割出来，index中用来到处store 和基础的数据
 */
export const userInfoStore = defineStore("USER_INFO", {
    state: () => {
        return {
            name: '',
            password: '',
            phone: '',
        }
    },
    getters: {
        getName(state): string {
            return state.name;
        },
        getPassword(state): string{
            return state.password;
        },
        getPhone(state): string{
            return state.phone;
        }
    },
    // 修改方法
    actions: {
        setName(name: string){
            this.name = name;
        },
        setPassword(p: string){
            this.password = p;
        },
        setPhone(p: string){
            this.phone = p;
        }
    }
})

修改Login.vue中的数据，将登录页面输入的数据，保存到上面 定义的userInfoStore 下面的state中

    //
    import { userInfoStore } from '@/store';
    //
    const store = userInfoStore();
    const onSubmit = async(form: FormInstance|undefined) => {
        if (!form) return
        await form.validate((valid, fields) => {
        if (valid) {
            let data = {...formData, phone: '1232324323'}
            // 保持数据
            store.setName(data.name);
            store.setPassword(data.password);
            store.setPhone(data.phone);
           router.push({path: '/wellcom'})
        } else {
            console.log('error submit!', fields)
        }
        })
    }

在welcome.vue中，查找数据是否存在

import { userInfoStore } from '@/store';
const store = userInfoStore();
onMounted(()=> {
    console.log(store.name);
    console.log(store.password)
    
    
})

查看页面打印结果

到这里，pinia的简单使用就完成啦