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

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

总结

1、建项目就这么简单,也就是会遇到这些事而已

2、说webstorm不支持微信小程序开发的朋友,安装Uniapp Support试试

3、对我难的不是vue的语法,而是画页面、样式,以前出H5还用jQuery的时候,就是烦页面、样式。

好了,后端人就唠叨叨这里,希望能帮到大家,uping!

相关推荐
rookie_fly6 小时前
基于Vue的数字输入框指令
前端·vue.js·设计模式
西部森林牧歌7 小时前
Arbess零基础学习,使用Arbess+GitLab实现Vue.js项目构建并主机部署
vue.js·gitlab·arbess·tiklab devops
我有一棵树7 小时前
Vue 项目中全局样式的正确写法:不要把字体和主题写在 #app 上
前端·javascript·vue.js
wangbing112510 小时前
开发指南139-VUE里的高级糖块
前端·javascript·vue.js
半桶水专家10 小时前
Vue 3 动态组件详解
前端·javascript·vue.js
我有一棵树11 小时前
避免 JS 报错阻塞 Vue 组件渲染:以 window.jsbridge 和 el-tooltip 为例
前端·javascript·vue.js
没有鸡汤吃不下饭11 小时前
解决前端项目中大数据复杂列表场景的完美方案
前端·javascript·vue.js
低保和光头哪个先来12 小时前
如何实现弹窗的 双击关闭 & 拖动 & 图层优先级
前端·javascript·css·vue.js
张雨zy13 小时前
使用nvm管理本地node版本
vue.js·node.js
小码编匠13 小时前
Three.js 遇上 Vue3 开发现代化 3D 可视化编辑系统
vue.js·typescript·three.js