Vue环境搭建&第一个项目
- 一、环境搭建
- 二、安装Vue脚手架
- 三、创建Vue项目
一、环境搭建
- 下载方式从官网下载:http://nodejs.cn/download/
建议下载v12.16.0版本以上的,因为版本低无法创建Vue的脚手架
- 检验是否安装成功
- 配置环境变量
- 新增
NODE_HOME
,值为:D:\vue\nodejs
- 修改PATH并在最后添加:
;%NODE_HOME%;%NODE_HOME%\node_global;
- 到cmd下执行命令
npm config set prefix "D:\vue\nodejs\node_global"
npm config set cache "D:\vue\nodejs\node_cache"
- 新增
Mac终端自行配置,可以使用Homebrew安装对应内容
-
更改镜像源
- 淘宝镜像源:
npm config set registry https://registry.npm.taobao.org
- 华为镜像源:
npm config set registry https://repo.huaweicloud.com/repository/npm/
- 默认镜像源:
npm config set registry https://registry.npmjs.org/
查看镜像设置情况:
npm get registry
- 淘宝镜像源:
我默认使用的是华为的镜像源
二、安装Vue脚手架
npm install -g @vue/cli
可以在次之前安装一下cnpm
npm install -g cnpm
等待安装完成
三、创建Vue项目
切换到对应自己的目录
vue create vue-test
进入创建配置的选择界面
选择自己的对应的框架,或者选择Manually select features
,自己进行配置
等待创建完成
创建完成
创建完成后,目录结构
进入项目目录,启动项目
cd vue-test
npm run serve
打开浏览器输入地址,启动完成之后有提示的:http://localhost:8080/
到此为止,vue初始化的项目就搭建好了~