# `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)。

### 一、Vue项目安装

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