# `Vue`环境安装与运行

> 更新:`zhanli@2023-12-16`

### 一、`vue`开发环境的安装

##### 1.1 `vue`安装	

```shell
# 全局安装vue-cli : 打开windows命令提示符或者终端
npm install --global vue-cli
# 安装完毕后，运行命令验证安装情况，如果输出版本号，则说明安装成功
vue -V
# 出现版本信息即为正确
```

​		在`windows`的`powershell`中运行安装命令图如下：

![](http://logzhan.ticp.io:30000/logzhan/PictureHost/raw/branch/main/ELRIWebSystem/Learning/vue/vue-helloworld/install_vue-cli.png)

##### 1.2 初始化项目

​		`Webpack`是一个模块打包器。 它的主要目标是将 `JavaScript `文件打包在一起，打包后的文件用于在浏览器中使用。`vue-cli`可以使用`webpack`模板对项目进行初始化，即生成`webpack`模板的项目初始代码文件。然后根据提示填写项目基本信息以及相关工具配置：

```shell
vue init webpack vue-helloworld
```

​		上述命令可能出现`vue : 无法加载文件 C:\Users\JYZBYJ\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本`的错误，[解决方案链接](https://blog.csdn.net/m0_62639693/article/details/127314961)。

##### 1.2.1 下载模板过慢的问题

​		上述的命令执行的时候，由于`Github`访问的问题，可能会出现执行失败的问题。

```shell
Failed to download repo vuejs-templates/webpack: connect ECONNREFUSED 127.0.0.1:443
```

​		解决方案如下：[参考博客](https://blog.csdn.net/qq_39167720/article/details/123844445)

```shell
# 打开windows终端
# 进入到C:\Users\"Your User Name" 路径下
cd ~
mkdir .vue-templates
# 下载: https://github.com/vuejs-templates/webpack/releases 到 .vue-templates
# 本仓库Learning\vue\路径下也有提供webpack
# 解压后，重命名为webpack, 执行命令:
vue init webpack vue-helloworld --offline
```

##### 1.2.2 项目初始化配置

​		项目的初始化配置的选项可以参考如下：

![](http://logzhan.ticp.io:30000/logzhan/PictureHost/raw/branch/main/ELRIWebSystem/Learning/vue/vue-helloworld/vue_project_init_webpack.png)

1.2.3 本地运行

​		输入以下命令，控制台会输出浏览器的访问路径: 例如`http://localhost:8081/`

```shell
cd hellovue
npm run dev
```

​		本地浏览器打开的效果如下：

![](http://logzhan.ticp.io:30000/logzhan/PictureHost/raw/branch/main/ELRIWebSystem/Learning/vue/vue-helloworld/local_run.png)

### 二、Vue项目安装

```shell
cd vue-helloworld
# 安装依赖
npm install
# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npmmirror.com
# 启动服务
npm run dev
```