前端开发环境部署
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/ ,即可访问新创建的项目,项目环境已经搭建成功