vue3项目搭建 基于vite + typescript + vue-router + pinia

这几个是官网链接 可以去看看

1.vite:

2.pinia:

3.vue-router:

4.vue3:

第一步：我们这里使用vite创建项目

我这边用的是pnpm 速度快、节约磁盘空间、支持monorepo、安全性高 你们也可以用npm/yarn

pnpm创建：pnpm create vite npm创建：npm init vite@latest yarn创建： yarn create vite

1.

2.

3.

4.

5.我们打开vite.config.js文件配置一下路径别名 @

resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },

6.因为我们用的是ts 这边我们也要配置一下 打开tsconfig.json文件

"baseUrl": "./",
"paths": {
   "@/*": ["src/*"]
 }

第二步：我们安装开始Pinia存储库

pnpm安装：pnpm install pinia npm安装：npm install pinia yarn安装： yarn add pinia

1.

2. 我们在src里面创建一个store文件夹 在创建一个index.ts文件 将代码填写进去 记住我们装了typescript 如果文件后缀是js 会报什么未检测到类型 所有将js改为ts 下面这张图我忘记改了 后面改回来了

import { defineStore } from pinia
export const useStore = defineStore(main, {
  state: () => ({
    name: 你好陌生人！
  })
})

3.在main.ts里面添加pinia实例 注意要放在mount("#app")前面

4.我们在src里面创建一个views文件夹 在创建一个home.vue文件 将代码填写进去

<script setup lang="ts">
import { useStore } from "@/store/index"
const stores = useStore()
</script>

<template>
  <h1>{
         
  { stores.name }} ♥ 欢迎来到 vite + vue3 + TS + vue-router + pinia</h1>
</template>

5.app.vue文件这里我们将默认的替换成我们现在这个 代码忘记复制了 到这一步pinia的配置已经结束 我们可以跑一下看看

第三步：我们安装开始vue-router路由

pnpm安装：pnpm install vue-router@4 npm安装：npm install vue-router@4 yarn安装： yarn add vue-router@4

1.

2.我们在src里面创建一个router文件夹 在创建一个index.ts文件 将代码填写进去

import { createRouter, createWebHistory } from "vue-router";
export const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/",
      name: "home",
      component: () => import("../views/home.vue"),
    },
  ],
});

3.在main.ts里面添加router实例 注意要放在mount("#app")前面

4.app.vue文件这里我们将刚刚修改的替换成我们现在这个 代码忘记复制了 到这一步vue-router的配置已经结束 我们可以跑一下看看

<template>
      <router-link to="/"></router-link>
      <router-view></router-view>
  </template>

现在一个简答基本的项目已经搭建好了 zzzz