IT评测·应用市场-qidao123.com技术社区

标题: 使用WebStorm开辟Vue3项目 [打印本页]
作者: 铁佛    时间: 2025-4-4 06:43
标题: 使用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
复制代码
安装后的目次结构
  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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/) Powered by Discuz! X3.4