web前端开发---搭建vue项目环境

一、环境搭建

 1.node环境安装

Windows下安装Node.js

32位安装包下载地址：https://nodejs.org/dist/v8.12.0/node-v8.12.0-x86.msi

64位安装包下载地址：https://nodejs.org/dist/v8.12.0/node-v8.12.0-x64.msi

安装node   点击 next --> install --> finish 完成安装

测试是否安装完成，在命令行输入node -v，npm -v 命令查看Node.js是否安装成功

2.Webpack环境安装

命令行输入 npm i webpack –g 命令，使用npm安装全局webpack。

检查webpack版本 webpack -v ：

3.npm淘宝镜像切换

由于国外的网络限制，下载太慢，所以我们需要安装淘宝npm镜像来替代官方版本。

配置切换到淘宝源：npm config set registry https://registry.npm.taobao.org

检查是否切换到了淘宝源：npm info underscore：

安装cnpm： npm i -g cnpm

4.项目环境搭建

1.导入项目

导入VUE项目至开发工具（我这里使用的是Hbuilder X ,官方下载地址  https://www.dcloud.io/hbuilderx.html）

2.安装依赖

点击项目打开终端（alt+c）,输入 npm install 安装工程所需的依赖(当npm下载过慢时，可使用cnpm install安装)

npm install报错时，常用解决方案：

1. 升级npm npm i –g npm
2. 删除项目根目录下 的package-lock.json文件

3. 删除缓存目录下的所有数据 npm cache clean –force

4. 验证缓存数据的有效性和完整性，清理垃圾数据 npm cache verify

 3.启动项目

当依赖安装完成时，在终端输入npm run serve 启动项目服务

即前端项目启动完毕。