图文并茂——从零开始使用Webstorm创建vue.js项目

目录

1）安装node.js

2）创建node_global和node_cache文件夹

3）配置NODE_PATH环境变量

4）安装taobao镜像

5）安装webpack

6）全局安装vue脚手架vue-cli

7）使用Webstorm创建vue.js项目（默认项目，下面会介绍自定义创建项目）

8）使用vue-cli自定义创建项目

---

1）安装node.js

进入官网，下载推荐给大部分用户的版本，完成之后执行安装，选择安装目录之后一直next就行，不需要其他操作.

介于之后配置路径的易读性和方便读者对照，这里是笔者安装路径:H:\DevelopeSoft\NodeJsDown

安装好之后，运行cmd命令行，输入node -v来验证安装是否正确（出现版本号即正确），最新版本的安装，系统会自动配置系统环境变量，所以不需要用户自己手动配置node.js的环境变量

2）创建node_global和node_cache文件夹

在node.js安装路径下创建node_global和node_cache文件夹，创建之后运行下面两个命令

npm config set prefix “d:\nodejs\node_global”
npm config set cache “d:\nodejs\node_cache”

之后运行npm命令下载express

npm install express -g

成功之后可以在node_global/node_modules下看到多了一个express文件夹（这里因为笔者已经把后续步骤完成，所以多了cnpm文件夹）

3）配置NODE_PATH环境变量

路径为node.js安装路径node_global/node_modules，H:\DevelopeSoft\NodeJsDown\node_global\node_modules

为了验证以上步骤没有出错，在cmd命令行下面执行node，并输入require('express')命令执行，出现以下界面则成功，说明上述步骤没有错误

如有错误请检查环境变量是否配置正确，最后使用.exit退出该模式

4）安装taobao镜像

（类比maven的ali镜像作用，因为访问国外速度慢，使用镜像加速）

执行以下命令：npm install -g cnpm --registry=https://registry.npm.taobao.org 

使用cnpm -v来验证

5）安装webpack

cnpm install webpack -g

cnpm install webpack-cli -g

使用webpack -v来验证

6）全局安装vue脚手架vue-cli

npm install -g vue-cli
使用vue -V验证（注意是大写的V）

7）使用Webstorm创建vue.js项目（默认项目，下面会介绍自定义创建项目）

如果遇见这种错误

/ fetchMetadata: sill resolveWithNewModule @vue/cli-ui@4.5.12 checking installable status

请不要慌张，这个就是因为没有走taobao镜像的原因，修改一下配置即可，如下：

npm config get registry（获取当前npm配置）

从截图我们可以看到，网址并不是之前下载安装的taobao镜像地址，所以需要我们修改设置

npm config set registry https://registry.npm.taobao.org

设置成功之后项目就能成功创建

等待项目创建完成

点击debug启动项目

访问地址之后出现以下页面即成功

8）使用vue-cli自定义创建项目

打开命令行工具输入vue create projectName

可能出现以下提示：

这个是因为当前vue-cli版本过低原因，根据提示安装最新的vue-cli，如果已经安装过了，需要先uninstall卸载，即上面截图第一个命令

命令行切换到想要创建的项目的路径下：

使用命令行vue create projectName 创建项目，接下来可以选择默认或者手动配置，手动配置可以根据自己需要的工具进行选择，下面举个例子：

（上下箭头进行选择，空格表示选中，enter确认，最下面的图的蓝色字体就是每个步骤选择的选项）

创建完成之后，切换到项目目录下，执行npm run serve启动项目

此时访问localhost:8080也会出现vue首页

如果想在webstorm启动，可以点击add configuration

name可以任意取，和项目名保持一致即可，点击apply并确认，然后点击界面的run或者debug也能正常启动项目了