​vue3创建项目​及pinia和vue-router的配置与安装

vue3使用Vite来创建项目

npm创建

npm create vite@latest

可以在创建的同时指定项目名称和模板

# npm 7+，需要添加额外的 --：
npm create vite@latest my-vue-app -- --template vue

当然也可以使用如下命令,在创建项目的同时进行项目的一些配置

npm create vue@latest

## 1.创建命令

npm create vue@latest

## 2.具体配置

## 配置项目名称

√ Project name: vue3_test

## 是否添加TypeScript支持

√ Add TypeScript? Yes

## 是否添加JSX支持

√ Add JSX Support? No

## 是否添加路由环境

√ Add Vue Router for Single Page Application development? No

## 是否添加pinia环境

√ Add Pinia for state management? No

## 是否添加单元测试

√ Add Vitest for Unit Testing? No

## 是否添加端到端测试方案

√ Add an End-to-End Testing Solution? » No

## 是否添加ESLint语法检查

√ Add ESLint for code quality? Yes

## 是否添加Prettiert代码格式化

√ Add Prettier for code formatting? No

推荐使用pnpm方式

pnpm创建

pnpm create vite

可以在创建的同时指定项目名称和模板

pnpm create vite my-vue-app --template vue

创建项目的同时进行项目的一些配置

pnpm create vue

具体配置同上

创建演示

这里使用 pnpm创建的第二条语法

切换到项目目录,安装依赖

启动项目

如下,就是刚创建好的项目结构

安装路由vue-router

当然,如果你在创建项目时已经通过选项添加了路由,就不用再次安装了

使用命令:

pnpm add vue-router@4

或使用:

pnpm install vue-router@4

安装pinia

同样的,如果你在创建项目时已经通过选项添加了pinia,就不用再次安装了

使用命令:

pnpm install pinia

进行配置

安装好之后,查看package.json文件,确保在生产环境中有 pinia 和 vue-router

修改style.css文件

配置vue-router

在src目录下创建

1, router

2, views

这两个文件夹

在views文件夹下创建视图文件

在router文件夹下,创建index文件

// createRouter: 用于创建路由实例
// createWebHashHistory: 使用哈希模式创建路由历史记录
// RouteRecordRaw: 路由记录的类型定义，
import { createRouter, createWebHashHistory } from "vue-router";
import type { RouteRecordRaw } from "vue-router"; //在 TS 中，import type 用于明确导入类型信息

//创建路由规则
const routes: RouteRecordRaw[] = [
    {
        name: "home",
        path: "/",
        component: () => import("../views/home.vue"), //懒加载写法
    },
];

// 创建路由实例
const router = createRouter({
    history: createWebHashHistory(), // 使用哈希模式创建路由历史记录
    routes,
});

// 导出路由实例
export default router;

改写 main.ts 挂载路由

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

//引入router
import router from './router'

//创建app实例
const app = createApp(App)

app.use(router)//挂载router
app.mount('#app')

改写App.vue和HelloWorld.vue 进行项目预览

路由配置成功

配置pinia

在src目录下创建 store 文件夹; 并且在 store文件夹下创建仓库

import { defineStore } from "pinia";

// 使用 defineStore 定义 store
// 第一个参数是 store 的唯一 id，第二个参数是 store 的配置对象
// store 的唯一 id 是在 store 中用来区分 store 的
//* id名必须与 store 的文件名一致
export const useUserStore = defineStore("user", {
    // state 是一个函数，返回一个对象
    state: () => ({
        test:'你好!!我是pinia'
    }),
    // getters 用于从 state 中派生出状态
    getters: {},

    // actions 用于定义方法，可以是同步或异步的
    actions: {},
});

改写 main.ts 挂载 pinia

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";

//引入router
import router from "./router";

//引入pinia
import { createPinia } from "pinia";

//创建pinia实例
const pinia = createPinia();

//创建app实例
const app = createApp(App);

app.use(pinia); //挂载pinia
app.use(router); //挂载router
app.mount("#app");

改写 home 视图组件 进行预览

pinia 安装成功