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！