WebStorm构建vue项目

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
#结果如下
    [email protected] (E:\nodejs\node_modules\cnpm\lib\parse_argv.js)
    [email protected] (E:\nodejs\node_modules\cnpm\node_modules\npm\lib\npm.js)
    [email protected] (E:\nodejs\node.exe)
    [email protected] (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

WebStorm构建vue项目_第1张图片

为项目命名,一路next即可完成项目创建

项目结构如下图:

WebStorm构建vue项目_第2张图片

启动项目后,会出现报错信息如下:

WebStorm构建vue项目_第3张图片

提示信息表明webpack-dev-server版本与vue版本不一致,解决方法为:

#查看vue版本
vue -V
#卸载原先webpack-dev-server
cnpm uninstall webpack-dev-server
#安装符合的新版本
cnpm i [email protected]

重新启动项目,项目运行成功

WebStorm构建vue项目_第4张图片

实际应用中,可能存在需要指定端口号或者端口被占用重新指定新的端口号问题,解决方法如下:

参考博客:https://blog.csdn.net/liyuxing6639801/article/details/60325558

修改的配置文件为:项目名称/config/index.js文件

WebStorm构建vue项目_第5张图片

可以指定IP地址和端口号,设置完成后重新启动项目

在浏览器中输入url,若打开如下图所示,说明项目创建成功

WebStorm构建vue项目_第6张图片

 

你可能感兴趣的:(WebStorm构建vue项目)