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