搭建vite+vue3项目时遇到的问题

搭建项目(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.html

main.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