windows下webstorm创建VUE项目
安装node.js
Node是一个让javas运行在服务端的开发平台,Node.js的包管理器是npm,在安装nodejs时,同时安装npm。
npm的默认源存在网络延迟,下载缓慢或不完整的情况,推荐安装淘宝镜像
添加淘宝镜像
#查看node,npm版本信息
node -v
v10.15.3
npm -v
6.4.1
#查看nodejs安装location,便于找到配置文件位置,加入淘宝镜像
where node
E:\nodejs\node.exe
nodejs安装位置为:
E:\nodejs\node.exe
配置文件npmrc的路径为:E:\nodejs\node_modules\npm\npmrc
用文本编辑器打开npmrc文件,配置源路径及包存储环境
registry = "https://registry.npm.taobao.org/"
prefix=E:\nodejs
cache=E:\nodejs\node_cache
测试
#测试安装是否成功
cnpm -v
#结果如下
cnpm@6.0.0 (E:\nodejs\node_modules\cnpm\lib\parse_argv.js)
npm@6.9.0 (E:\nodejs\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@10.15.3 (E:\nodejs\node.exe)
npminstall@3.20.2 (E:\nodejs\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=E:\nodejs
win32 x64 10.0.17763
registry=https://registry.npm.taobao.org
安装webpack
利用cnpm安装webpack
cnpm install webpack -g
#测试安装
webpack -v
4.29.6
#linux下如果出现command not found...报错,需要将所在路径添加到环境变量
#如在~/.bashrc中添加如下命令,则可以调用webpack及其他依赖
export PATH=/home/yourhome/program/nodejs/bin/:$PATH
如果报错,查看报错信息依次安装缺少的依赖包
安装vue-cli
cnpm install --global vue-cli
#测试安装
vue -V (V要大写)
2.9.6
使用WebStorm创建vue项目
(以下是在linux平台下构建项目,仅供参考,经测试,windows平台项目无法启动的问题也可用如下方法解决)
详细内容可参考 https://blog.csdn.net/weixin_40760196/article/details/79952652
File ->>new project
为项目命名,一路next即可完成项目创建
项目结构如下图:
启动项目后,会出现报错信息如下:
提示信息表明webpack-dev-server版本与vue版本不一致,解决方法为:
#查看vue版本
vue -V
#卸载原先webpack-dev-server
cnpm uninstall webpack-dev-server
#安装符合的新版本
cnpm i webpack-dev-server@2.9.7
重新启动项目,项目运行成功
实际应用中,可能存在需要指定端口号或者端口被占用重新指定新的端口号问题,解决方法如下:
参考博客:https://blog.csdn.net/liyuxing6639801/article/details/60325558
修改的配置文件为:项目名称/config/index.js文件
可以指定IP地址和端口号,设置完成后重新启动项目
在浏览器中输入url,若打开如下图所示,说明项目创建成功