个人博客搭建：（一）搭建Vue环境，创建第一个Vue项目

本文将介绍如何使用Vue-cli搭建Vue环境，并跑起第一个项目

目录

          一、搭建Vue环境

        1.1 下载Node.js安装包

        1.2 安装Node.js环境

        1.3 验证是否安装成功

        1.4 配置环境变量

二、使用Vue脚手架，搭建第一个Vue项目

2.1 安装脚手架

2.2 创建第一个Vue项目

2.3  打开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 + 鼠标左键点击上图中红框内的地址，可以在默认浏览器中直接打开页面。也可以在其他浏览器中输入这个地址进行访问。

出现这个页面则访问成功。