重新整理了一下项目开发必备的一些操作，以后直接复制黏贴运行，随着项目开发，后期会陆续补充常用插件或组件等
如果你是还没有安装过的新人，建议从《通过安装Element UI/Plus来学习vue之如何创建项目、搭建vue脚手架、npm下载、封装等》开始。
AI询问前提
直接用这句： 现在你是有十年编程经验的程序员，这是一个用vue3,vite,typescript,以setup组合式代码风格的模式开发的项目。请根据这段代码风格，变量、函数、类、接口等等的命名规范，… ，后面加上你的询问条件。比如：
现在你是有十年编程经验的程序员，这是一个用vue3,vite,typescript,以setup组合式代码风格的模式开发的项目。请根据这段代码风格，变量、函数、类、接口等等的命名规范，分析一下在下载阶段可以增加哪些安全举措，并提供相关代码，尽量不修改原代码。
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
# 编译方式一，run dev的时候没问题，但编译的时候可能出错，比如@别名的问题找不到包
npm run build
# 编译方式二，这个方式只要在开发的时候没问题，那么编译基本就没问题
vite build
# 强制重启服务，应对各种疑惑
vite --force
# 安装路由
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
# echarts
cnpm install echarts vue-echarts
# zrender（如果渲染出问题再考虑安装）
cnpm update echarts vue-echarts zrender
# secure-ls 加密
cnpm install secure-ls
# 安装路径（如果你不使用该模块，那可以考虑不装）
cnpm install path
# 与process等关键字使用有关（如果你不使用该模块，那可以考虑不装）
cnpm install @types/node
# 与typescript解析路径相关（如果出问题再考虑安装）
cnpm install vite-tsconfig-paths
常用配置修改
- 支持
@符号作为根路径
如果配置失败请参考本文《【99.9%解决】vue3+vite+typescript+vscode使用@alias路径别名配置不正确导致红色波浪线的解决办法》
// 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编译，考虑@
// tsconfig.json
{
"files": [],
"references": [
{
"path": "./tsconfig.app.json" },
{
"path": "./tsconfig.node.json" }
],
"compilerOptions": {
"baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
"paths": {
// 路径映射，相对于baseUrl
"@/*": ["src/*"]
}
}
}
- 生产环境目录
正式使用时所在目录，比如我这里用了dist，那么在http://www.test.com/dist这时候就可以正常访问
// 不在根目录使用，在/dist下
// vite.config.ts
import {
defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vite.dev/config/
export default defineConfig({
base: process.env.NODE_ENV === 'production' ? '/dist/' : '/',
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
},
build: {
outDir: 'dist',
assetsDir: 'static',
rollupOptions: {
input: 'src/main.ts',
},
},
})
// router/index.ts
...
const router = createRouter({
history: createWebHistory(process.env.NODE_ENV === 'production' ? '/dist/' : '/'),
routes,
});
...
- typescript配置
vscode开发typescript在引用vue时会提示找不到模块，错误提示大概如下：
`src/index.ts:4:31 - error TS7016: Could not find a declaration file for module '@/components/system/Register.vue'. 'E:/Projects/test/src/components/system/Register.vue' implicitly has an 'any' type.`
这时需要在环境配置中加入声明，一般用方法一就够了。
// src/vite-env.d.ts
/// <reference types="vite/client" />
// 定义 .vue 文件的模块声明，使 TypeScript 能够正确识别和处理 Vue 组件
// 1. 方法1：更适合项目中有复杂的组件配置需求，或者需要更精确的类型检查
declare module "*.vue" {
import {
ComponentOptions } from 'vue'
const componentOptions: ComponentOptions
export default componentOptions
}
// 2. 方法2
declare module "*.vue" {
import Vue from 'vue';
export default Vue;
}
// 注意，当自定义目录下有一些常规内容读不了，试试把这个目录也加进去，如下
// 定义路径别名的类型声明
declare module '@/xxxx/*' {
import type {
ComponentOptions } from 'vue'
const componentOptions: ComponentOptions
export default componentOptions
}
其它
- 删除
不满意了、臃肿了就删，一个是node_modules/.vite，这是缓存位置，一个就是node_modules自己，删了以后
cnpm install
就都回来了~~
参考：