---
title: Vue 环境搭建(Windows)
date: 2020-10-30 16:19:20
tags: [Vue]
categories: [Vue, 环境搭建]
keywords: [黎梦课堂,Vue]
author: Anges黎梦
---
## Vue环境搭建

### 安装node.js

#### 下载安装

node.js 官网（[https://nodejs.org/en/](https://nodejs.org/en/)）

![](https://limeng-blog.oss-cn-hangzhou.aliyuncs.com/vue-env/node-download.png)

下载下来安装包：

![](https://limeng-blog.oss-cn-hangzhou.aliyuncs.com/vue-env/installpack.png)

双击进行安装，此处下一步下一步按照提示操作即可

![](https://limeng-blog.oss-cn-hangzhou.aliyuncs.com/vue-env/install1.png)

可以在这个步骤修改node安装路径

![](https://limeng-blog.oss-cn-hangzhou.aliyuncs.com/vue-env/install2.png)

默认安装项目

![](https://limeng-blog.oss-cn-hangzhou.aliyuncs.com/vue-env/install3.png)

到这一步的时候已经安装完毕了。

![](https://limeng-blog.oss-cn-hangzhou.aliyuncs.com/vue-env/install4.png)

#### 设置路径

> 设置nodejs prefix（全局）和cache（缓存）路径

##### 建立全局/缓存文件夹

> 在nodejs安装路径下，新建node_global和node_cache两个文件夹

![](https://limeng-blog.oss-cn-hangzhou.aliyuncs.com/vue-env/path.png)

##### 设置文件夹

```shell script
npm config set cache "D:\Program Files\nodejs\node_cache"
```


设置全局模块存放路径

```shell script
npm config set prefix "D:\Program Files\nodejs\node_global"
```

![](https://limeng-blog.oss-cn-hangzhou.aliyuncs.com/vue-env/setpath.png)

执行完没有报错，即为成功

设置成功后，之后用命令npm install XXX -g安装以后模块就在D:\vueProject\nodejs\node_global里

##### 基于 Node.js 安装cnpm（淘宝镜像）

```
npm install -g cnpm --registry=https://registry.npm.taobao.org
```

##### 设置环境变量（非常重要）

> 说明：设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径

- 鼠标右键"此电脑"，选择“属性”菜单，在弹出的“系统”对话框中左侧选择“高级系统设置”，弹出“系统属性”对话框。

- 修改系统变量PATH

![](https://limeng-blog.oss-cn-hangzhou.aliyuncs.com/vue-env/sys1.png)

打开系统属性 -> 环境变量

在系统变量中选择Path，打开环境变量配置。

填入node_global目录路径

![](https://limeng-blog.oss-cn-hangzhou.aliyuncs.com/vue-env/sys2.png)

##### 新增变量 NODE_PATH

![](https://limeng-blog.oss-cn-hangzhou.aliyuncs.com/vue-env/sys3.png)

### 安装VUE

```
cnpm install vue -g
```

![](https://limeng-blog.oss-cn-hangzhou.aliyuncs.com/vue-env/vue1.png)

### 安装VUE命令行工具

> vue-cli 脚手架

```
cnpm install vue-cli -g
```

![](https://limeng-blog.oss-cn-hangzhou.aliyuncs.com/vue-env/vue2.png)

### 创建VUE项目

使用命令新建项目
```
vue init webpack 项目名称
```

命令执行之后会有一些操作指示，按指定输入操作即可。

![](https://limeng-blog.oss-cn-hangzhou.aliyuncs.com/vue-env/vue3.png)

项目目录：

- build 最终发布代码的存放位置
- config 配置目录，包括端口号等项目配置
- node_modules 执行npm install 后产生的目录，包含node.js和npm依赖的文件以及后续安装的第三方组件或者第三方功能。
- src 开发目录
    - assets 放置图片等
    - components 存放组件
    - app.vue 主文件，项目入口
    - main.js 核心项目文件
    - router 路由配置
- static 静态资源文件
- .babelrc 设置转码规则和插件

### 启动项目

刚创建好的vue项目，我们需要为他安装依赖。

进入到项目路径下，使用命令：

```
cnpm install
```

启动命令：

```
cnpm run dev
```

![](https://limeng-blog.oss-cn-hangzhou.aliyuncs.com/vue-env/vue4.png)

![](https://limeng-blog.oss-cn-hangzhou.aliyuncs.com/vue-env/vue5.png)

剩下的就是按照我们自己的需求开发前端页面啦！

## 附录

[node.js 官网](https://nodejs.org/en/)
[vue 官网](https://cn.vuejs.org/)
[iview 框架网址](https://www.iviewui.com/)
[elementUI 框架网址](https://element.eleme.cn/#/zh-CN)