001.windows搭建Vue开发环境

前言

操作系统：win7
nodejs：12.9
IDE：webstorm

正文

1.安装webstorm

直接Jetbrain官网下载即可，一路下一步，无需特殊操作。

2.安装nodejs

由于我的操作系统是win7，当前最新版本16不支持win7，所以我对nodejs进行降级，选择了12.9（nodejs 12的最后一个版本）

3.配置webstorm

为了能让webstorm使用nodejs来解析程序，我们需要配置webstorm的nodejs

3.1打开webstorm配置界面，依次选择“Customize”--“All Settings”，随后会弹出配置窗口。

image.png

3.2 在配置窗口中依次选择，“Languages & Frameworks” -- "Node.js"。

image.png

3.3 选择本地的node.js解释器，然后保存即可。

image.png

4. 配置nodejs

4.1 配置npm淘宝源

由于npm服务器架设在国外，所以在安装包时可能会出现网络问题，为此淘宝团队在国内架设了镜像，我们可以从淘宝源中安装npm依赖包，从而来提升网络的效率和稳定性。
打开命令行，并执行以下命令。

$ npm config set registry https://registry.npmmirror.com

image.png

4.2 安装vue-cli

vue-cli，我们也称之为vue脚手架，它用来通过命令行的方式来协助我们创建、管理vue项目。
说明：-g 参数表示全局安装，此电脑上的其他用户也可以访问。

$ npm install vue-cli -g

image.png

4.3 安装webpack

webpack，是一个打包工具，用于将我们写好的vue程序进行打包，方便将打包后的文件进行安装部署。

$ npm install webpack -g

image.png

4.4 运行

在编写完vue程序后，执行npm run dev 命令，即可在浏览器中访问我们本地的vue程序了。