使用WebStorm开辟Vue3项目

记录一下使用WebStorm开辟Vu3项目时的配置
现在WebStorm可以个人免费使用啦！??
根本配置

打包工具：Vite
前端框架：ElementPlus
开辟语言：Vue3、TypeScript、Sass
代码检查：ESLint、Prettier
IDE：WebStorm 2024.2
首先说一下版本兼容标题，ElementPlus>=2.8.5需要Sass>=1.79.0，但是升级了Sass后，会导致Element提示很多告诫，猜测原因是由于Sass在后续版本修改了一些语法规则，而Element没有跟学习改。这些告诫虽然不影响代码运行，但是看着糟心，目前只能等待官方后续更新了。
搭建Vue3项目

通过Vite搭建Vue3项目

1. npm create vite@latest my-vue-app -- --template vue-ts

复制代码

• my-vue-app为项目文件夹名称
  
• vue-ts表示使用包罗typescript的vue项目模板搭建
  

安装后的目次结构

1. ├─ index.html
2. ├─ package.json
3. ├─ tsconfig.json #typescript配置文件
4. ├─ tsconfig.app.json #typescript配置文件，本项目的ts配置，自动引用到tsconfig.json中
5. ├─ tsconfig.node.json #typescript配置文件，为vite服务的ts配置，自动引用到tsconfig.json中
6. ├─ vite.config.ts #vite配置文件
7. ├─ src
8. │  ├─ assets #静态文件
9. │  ├─ components #组件
10. │  ├─ App.vue
11. │  ├─ main.ts

复制代码

安装框架和其他工具包

修改项目根目次下的package.json文件，添加前端框架和其他依赖包

1. {
2.   "name": "my-vue-app",
3.   "private": true,
4.   "version": "0.0.0",
5.   "type": "module",
6.   "scripts": {
7.     "dev": "vite",
8.     "build": "vue-tsc -b && vite build",
9.     "preview": "vite preview"
10.   },
11.   "dependencies": {
12.     "vue": "^3.5.12",
13.     "element-plus": "^2.8.1"
14.   },
15.   "devDependencies": {
16.     "@

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。