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

webstorm新建vue项目相关问题

前言

      这个迭代后端需求偏少,前端code的键盘都起火星子了。来了4个外包支持,1个后端3个前端,还是不够用啊。刚好趁这个机会稍微学习下vue,其实之前环境也配置过了,所以这里就不分享环境配置了,主要分享下新建项目与报错处理、还有uniapp支持的插件。


一、新建项目

      之前说微信小程序需要用HBuild编辑器,主要是看中它可以运行时,自动打开微信开发工具看效果,但是说实话我时用idea习惯了,所以前端也只想用webstorm。
在这里插入图片描述
      新建项目就操作完成,过程中可能会报错,最后新建的项目没有node_modules、public、src目录,没有package.json等文件。
原因可能就是你的node版本太高了,yarn目前最高支持才到21,比如报错:
在这里插入图片描述
      实际上它提示的已经很明确了,刚刚的步骤选址地版本的node,重新一遍就行。

二、相关版本与管理

1.node版本管理

      可以用n、nvm,n需要先自己安装node,是node下的软件包,nvm是独立的一个软件包,个人建议其实用nvm更好。
      然后要安装这些环境如果怕麻烦先装Homebrew,如果是win那就自己折腾下吧。如果刚开始进入编程界,劝你放弃win,用水果吧。
brew的安装见它的中文网:https://brew.idayer.com/

2.安装包的版本查看

命令:npm view 软件名 versions
例如:查看yarn的版本
在这里插入图片描述

3.安装软件包

      可以用npm安装,也可以用brew安装,但是npm安装有限制,那就是版本要在它的资源里面注册了的(可能安全点)。brew那就基本的版本都可以装。
npm命令:npm install 软件名 21.0.0
brew命令:brew install 软件名 21.0.0
例如:安装21.0.0版本node
在这里插入图片描述

4.node版本切换

查看可切换版本:nvm list
在这里插入图片描述
切换:
命令:nvm use 22.2.0
在这里插入图片描述

三、webstorm新建的vue项目启动报错处理

      你选择了合适的node版本,成功创建项目,点击webstorm的run/debug,你可能会失望的发现运行不起来,报错找不到…/paakage.json。(原因我其实也没有找到)
      我这里处理是删除node_modules,重新在npm install一遍。
打开webstrom的termnial

#删除node_modules
rm -rf node_modules
#重新install
npm install
#初始化,生成package.json
npm init -y

总结

1、建项目就这么简单,也就是会遇到这些事而已
2、说webstorm不支持微信小程序开发的朋友,安装Uniapp Support试试
3、对我难的不是vue的语法,而是画页面、样式,以前出H5还用jQuery的时候,就是烦页面、样式。
      好了,后端人就唠叨叨这里,希望能帮到大家,uping!

http://www.lryc.cn/news/352546.html

相关文章:

  • 2024年高考考务人员网上培训参考答案
  • JavaEE之线程(9) _定时器的实现代码
  • 纯前端实现将页面数据下载word文档中【包括图片,echarts图,表格,和对话 内容】
  • JavaSE——类和对象(二)~~封装
  • 头歌OpenGauss数据库-I.复杂查询第9关:交换性别
  • 冷干机使用中的注意事项
  • OpenFeign微服务调用组件使用
  • 文心智能体,零代码构建情感表达大师智能体
  • es6
  • 「贪心算法」柠檬水找零
  • ssm139选课排课系统的设计与开发+vue
  • Python使用virtualenv创建虚拟环境
  • LuatOS-Air二次开发学习
  • 【Linux】关于获取进程退出状态中的core dump标志补充
  • Vitis HLS 学习笔记--抽象并行编程模型-控制驱动与数据驱动
  • Python爬取B站视频:封装一下
  • Android Low Storage机制之DeviceStorageMonitorService
  • 1105: 交换二叉树的孩子结点
  • TensorFlow.js
  • 131. 面试中关于架构设计都需要了解哪些内容?
  • Nodejs+Websocket+uniapp完成聊天
  • 神经网络学习
  • CentOS部署NFS
  • JWT使用方法
  • 使用鱼香肉丝一键安装重新安装ROS后mavros节点报错,.so文件不匹配
  • STM32+CubeMX移植SPI协议驱动W25Q16FLash存储器
  • gpt-4o考场安排
  • 【Unity AR开发插件】四、制作热更数据-AR图片识别场景
  • Spring AOP的实操 + 原理(动态代理)
  • 16.线性回归代码实现