本文将介绍如何使用Vue-cli搭建Vue环境,并跑起第一个项目
目录
一、搭建Vue环境
1.1 下载Node.js安装包
从官网下载安装包:
https://nodejs.org/en/download/
从百度网盘下载:
链接:https://pan.baidu.com/s/1y9Rv-3xcuxd9v-ZkASePsg
提取码:9jg1
1.2 安装Node.js环境
双击安装包,一直Next直到结束
1.3 验证是否安装成功
在键盘按下【win+R】键,输入cmd,回车,打开控制台窗口。
# 查看node.js版本号
node -v
# 查看npm版本号
npm -v
1.4 配置环境变量
配置环境变量主要是修改npm安装的全局模块的所在路径和缓存cache的路径。通过配置npm全局安装路径,在执行npm install
express【-g】 全局安装时,会将要安装的模块安装到配置好的路径中,避免占用C盘空间。
1.4.1 找到Node的安装目录下,创建目录:node_cache文件夹和 node_global文件夹
1.4.2 在控制台上设置
右侧路径为上面的文件夹路径
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
1.4.3 设置环境变量
“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”
进入环境变量对话框后,
① 【系统变量】下新建【NODE_PATH】,输入【D:\Develop\nodejs\node_global\node_modules】,
② 将【用户变量】下的【Path】修改为【D:\Develop\nodejs\node_global】
其中的地址为Node.js的实际安装路径。
1.4.4 验证环境变量是否生效
# 安装express模块,查看安装位置是否是全局变量配置的路径
npm install express -g # -g是全局安装的意思
二、使用Vue脚手架,搭建第一个Vue项目
2.1 安装脚手架
shift + 鼠标右键,点击打开Powershell窗口。
#安装脚手架
npm install -g vue-cli
2.2 创建第一个Vue项目
2.2.1 创建Vue项目
// 使用方式
vue init <template-name> <project-name>
// 例子
vue init webpack official_web
2.3 打开Vue项目并运行
2.3.1 使用VSCode打开项目文件夹
【文件】 -- 【打开文件夹】,选择自己刚才创建的Vue项目
打开后的界面:
2.3.2 运行项目,并打开页面
打开终端: ctrl + shift + ` (`是键盘数字1左边的那个)
打开项目:
#在终端输入
npm run dev
运行完毕后:
ctrl + 鼠标左键点击上图中红框内的地址,可以在默认浏览器中直接打开页面。也可以在其他浏览器中输入这个地址进行访问。
出现这个页面则访问成功。