Java项目前端开发环境部署

前端开发环境部署

1、安装VSCode https://code.visualstudio.com/Download

2、node.js和npm安装 http://nodejs.cn/download/
(1)安装完成后，cmd输入node -v和npm -v检查是否安装成功。
(2)设置npm全局安装路径与缓存路径
npm config set prefix "nodejs安装路径\node_global"
npm config set cache "nodejs安装路径\node_cache"

3、cnpm安装
很多npm包下载很慢，为了提高npm包下载速度，需要安装cnpm，即淘宝镜像
(1)npm install -g cnpm --registry=https://registry.npm.taobao.org
(2)输入cnpm -v检查是否安装成功。
(3)配置系统环境变量
CNPM_PATH  nodejs安装路径\node_global\
PATH  添加变量 %CNPM_PATH%
(4)再次查看cnpm是否可用，发现不行还需set-ExecutionPolicy
解决使用 PowerShell 不能运行 cnpm 等命令的问题
a、在powershell中执行 Start-Process powershell -Verb runAs 会提示授权，并以管理员身份运行powershell
b、输入如下命令：set-ExecutionPolicy RemoteSigned
c、根据提示，输入：A

4、安装vue-cli脚手架
cnpm install -g @vue/cli

5、初始化项目
vue create vue-project
选择Default ([Vue 2] babel, eslint) ,回车
使用Visual Studio Code打开目录vue-project

6、运行项目
在vue-project目录中运行命令安装依赖
cnpm install
运行
cnpm run serve
运行结果为
   DONE Compiled successfully
   App running at:
   - Local:   http://localhost:8080/
   - Network: http://192.168.0.100:8080/
浏览器中输入 http://localhost:8080/ ，即可访问新创建的项目，项目环境已经搭建成功