当前位置：首页 > news >正文

vue3项目开发一些必备的内容，该安装安装，该创建创建

news 2025/9/14 19:47:03

重新整理了一下项目开发必备的一些操作，以后直接复制黏贴运行，随着项目开发，后期会陆续补充常用插件或组件等

如果你是还没有安装过的新人，建议从《通过安装Element UI/Plus来学习vue之如何创建项目、搭建vue脚手架、npm下载、封装等》开始。

VSCODE插件

建议的插件

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
Element Plus Snippets
element-plus-doc
element-plus-vue
TONGYI Lingma
Vue - Official
vue3-snippets-for-vscode
Vetur / Volar（不建议安装，Volar已正式更名为Vue-Official）

在这里插入图片描述

常用组件的安装命令

这里全用cnpm，方便自己复制黏贴；如果你镜像过npm，就改一下

# 创建脚手架
cnpm create vite@last
# 安装依赖
cnpm install
# 启动项目
npm run dev# 安装路由
cnpm install vue-router
# 安装mitt
cnpm install mitt
# 安装pinia
cnpm install pinia
# 安装pinia持久化
cnpm install pinia-plugin-persistedstate
# 安装axios
cnpm install axios
# 安装element-plus
cnpm install element-plus --save
# 安装图标
cnpm install @element-plus/icons-vue
# 安装路径
cnpm install path

常用配置修改

支持@符号作为根路径

// vite.config.js 或 vite.config.ts
// 1. 方法1
import { defineConfig } from 'vite'
import vue from '@vitejs/plug-vue'// https://vite.dev/config/
export default defineConfig({plugins: [vue()],//加上本句可用@来定义位置resolve: {alias: {'@': '/src'}}
})
// 2. 方法2
import { defineConfig } from 'vite'
import vue from '@vitejs/plug-vue'
import path from 'path' //前面已经cnpm install path// https://vite.dev/config/
export default defineConfig({plugins: [vue()],//加上本句可用@来定义位置resolve: {alias: {'@': path.resolve(__dirname, 'src')}}
})// 3.注意如果是ts编译，考虑@
{"files": [],"references": [{ "path": "./tsconfig.app.json" },{ "path": "./tsconfig.node.json" }],"compilerOptions": {"baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录"paths": { // 路径映射，相对于baseUrl"@/*": ["src/*"] }}
}

typescript配置
vscode开发typescript在引用vue时会提示找不到模块，产生各种波浪线，这时需要在环境配置中加入声明

// src/vite-env.d.ts
/// <reference types="vite/client" />// 定义 .vue 文件的模块声明，使 TypeScript 能够正确识别和处理 Vue 组件
// 1. 方法1：更适合项目中有复杂的组件配置需求，或者需要更精确的类型检查
declare module "*.vue" { import { ComponentOptions } from 'vue'const componentOptions: ComponentOptionsexport default componentOptions
}
// 2. 方法2
declare module "*.vue" {import Vue from 'vue';export default Vue;  
}// 注意，当自定义目录下有一些常规内容读不了，试试把这个目录也加进去，如下
// 定义路径别名的类型声明
declare module '@/xxxx/*' {import type { ComponentOptions } from 'vue'const componentOptions: ComponentOptionsexport default componentOptions
}