vue3 学习笔记01 – 搭建项目及基础配置
确保你已经安装了Node.js（建议使用最新的LTS版本）
搭建项目
- 初始化项目
如果选择npm创建项目再执行
npm create vite@latest my-vue3-app --template vue-ts使用yarn，如果电脑没有安装yarn cnpm i yarn -gyarn create vite my-vue3-app --template vue-ts
使用pnpm：如果电脑尚未安装 pnpm cnpm i pnpm -gpnpm create vite my-vue3-app --template vue-ts
- 进入项目文件夹
cd my-vue3-app
- 安装依赖
npm install
- 启动项目
npm run dev
-
项目目录
-
访问页面
基础配置 – vite.config.ts
- 使用ip访问
export default defineConfig({plugins: [vue()],server:{host: '0.0.0.0' // 允许IP访问},resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},
})
-
resolve.alias 别名
- 安装 @types/node
npm install --save-dev @types/node-
在tsconfig.json中配置,确认 TypeScript 配置正确
-
vite.config.js中配置
import { fileURLToPath, URL } from 'node:url'export default defineConfig({plugins: [vue()],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},})
-
打开src/mian.ts发现在引入 App.vue中画红线，说明项目中没有.vue的声明文件，需要自行补充一下
src/types/env.d.ts
/// <reference types="vite/client" />
declare module '*.vue' {import { DefineComponent } from 'vue'const component: DefineComponent<{}, {}, any>export default component
}
