使用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.     "@vitejs/plugin-vue": "^5.1.4",
17.     "typescript": "~5

复制代码

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

继续阅读请点击广告