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平台项目无法启动的问题也可用如下方法解决）

详细内容可参考  http://www.javashuo.com/article/p-xjgfqshp-pn.html

File ->>new project

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

项目结构如下图：

启动项目后，会出现报错信息如下：

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

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

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

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

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

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

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

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