Webstorm新建vue项目

595 阅读1分钟
1.检查nodejs是否安装(建议安装16版本)
node -v

image-20221208090818894.png

node官方地址:nodejs.org/zh-cn/

2.检查使用的镜像源是否为淘宝镜像源
npm get registry

image-20221208092017303.png

如果不是,执行以下命令修改镜像源

npm config set registry https://registry.npm.taobao.org
3.检查是否安装vue/cli脚手架
vue -V

image-20221208085051519.png

有安装会出现脚手架的版本号,未安装会提示 vue -V不是内部或外部命令,也不是可运行的程序 或批处理文件。

安装脚手架

npm install -g@vue/cli

如果安装的是旧版本(vue-cli2)的脚手架,可以先卸载再安装最新版本的脚手架。

npm uninstall vue-cli -g
4.创建项目
vue create demo(项目名)
5.选择使用的vue的版本(看自己需求)

image-20221208092544859.png

创建完成:

image-20221208092635750.png

6.用WebStorm打开项目

6.1找到package.json文件,右键运行npm install

image-20221208093048903.png

6.2在package.json出显示npm脚本

image-20221208093134190.png

6.3双击serve跑服务

image-20221208093219230.png

6.4运行成功

image-20221208093249206.png

7.页面截图

image-20221208093344435.png