搭建项目(vite+vue3)

第一步:先安装开发工具
下载node.js https://nodejs.cn/download/
node自带npm 可通过npm -v /node -v查看npm和node是否安装成功以及版本号
以及查看@vue/cli是否安装

第二步:创建项目(使用vite)
下载vite: npm install -g create-vite
创建项目:create-vite project-name
如下图创建项目时可能会报以下错误
解决方案:
清除npm缓存npm cache clean -f
下载最新的node和npm版本

更新版本时遇到的问题:npm版本（v10.5.0）不兼容当前安装的Node.js版本（v14.10.0）
ERROR: npm v10.5.0 is known not to run on Node.js v14.10.0.  This version of npm supports the following node versions: `^18.17.0 || >=20.5.0`. You can find the latest version at https://nodejs.org/.
解决:直接进入官网下载需要的node版本,https://nodejs.org/en创建项目时方向键盘不能使用了,可能git bash here 自己本身有问题，平时运行其他命令都没事。
于是把git bash here换成cmd或PowerShell上下键即可使用了

第三步:启动项目
按照上图所示,依次选择回车即可,根据提示操作,最终会打开如下图的界面,说明基础的项目搭建完成

第四步:通过vscode编辑器打开代码
遇到如下问题(main.js文件)
1>找不到模块“vue”。你的意思是要将 “moduleResolution” 选项设置为 “node”，还是要将别名添加到 “paths” 选项中?ts(2792)
解决:找到tsconfig.json文件把moduleResolution设置为"node"把这个选项设置完之后发现
allowImportingTsExtensions这个选项一直报错,查了相关资料发现是ts的版本不兼容这个属性,于是npm install typescript@latest --save-dev更新ts的版本,重启之后发现报错没有了

	2>找不到模块“./App.vue”或其相应的类型声明。ts(2307)a.解决:安装:npm install --save-dev typescript-vue-plugin在tsconfig.json中设置{"compilerOptions": {"plugins": [{"name": "typescript-vue-plugin"}]}b.找到vite-env.d.ts文件,把如下代码复制进去/// <reference types="vite/client" />declare module "*.vue" {import type { DefineComponent } from "vue"const vueComponent: DefineComponent<{}, {}, any>export default vueComponent}

第五步:完善开发文件
引入在main.ts文件中引入router文件时,报错"找不到模块“vue-router”或其相应的类型声明。ts(2307)"====>原来没有安装vue-router npm install vue-router

状态管理器可以使用pinia  
安装:npm install pinia
https://pinia.vuejs.org/zh/introduction.htmlmain.ts文件内容:
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入路由配置
import router from "./router";
// 引入pinia
import { createPinia } from 'pinia'
const pinia = createPinia()
const app = createApp(App)
app.use(router)
app.use(pinia)
app.mount('#app')router文件代码:
import { createRouter, createWebHistory } from "vue-router";import HomeView from "../views/index.vue";const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: "/",name: "home",component: HomeView,},{path: "/about",name: "about",component: () => import("../views/about/index.vue"),},],
});export default router;pinia文件代码如下:
import { defineStore } from 'pinia'const useCounterStore = defineStore('counter', {state: () => {return { count: 0 }},// 也可以这样定义// state: () => ({ count: 0 })actions: {increment() {this.count++},},getters: {}
})
export default useCounterStore