Vue安装教程

Dear 丶 2024-04-17 05:52 32阅读 0赞

# vue是一个前端框架 #

## 第一步：下载Node.js ##

> 下载地址：[https://nodejs.org/en/][https_nodejs.org_en]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h0MzE0MTU5_size_16_color_FFFFFF_t_70][]

> 检测版本信息：node -v

![20190824151716687.png][]

Node自带了NPM

## 第二步：NPM ##

> npm install nrm -g

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h0MzE0MTU5_size_16_color_FFFFFF_t_70 1][]

因为默认的是国外的网络所以非常慢，更改镜像为淘宝的。

> nrm use taobao

![20190824152142486.png][]

查看镜像：

> nrm ls

![201908241522372.png][]

# 第三步：安装vue-cli脚手架 #

> cnpm install -g vue-cli

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h0MzE0MTU5_size_16_color_FFFFFF_t_70 2][]

# 第四步：创建项目 #

ps：一定要跳转到你要创建项目的文件夹下。

打开项目所在目录，点击打开控制台：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h0MzE0MTU5_size_16_color_FFFFFF_t_70 3][]

> 进入vue-demo目录，先输入： `npm init -y` 进行初始化

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h0MzE0MTU5_size_16_color_FFFFFF_t_70 4][]

> 安装Vue，输入命令： `npm install vue@2.5.16 --save`
> 
> 当然 不指定版本号也是可以的 `npm install vue --save`

![2019082415410635.png][]

然后就会在hello-vue目录发现一个node\_modules目录，并且在下面有一个vue目录

![20190824154128188.png][]

node\_modules是通过npm安装的所有模块的默认位置。

[https_nodejs.org_en]: https://nodejs.org/en/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h0MzE0MTU5_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/39a3f8a9c6c64b4eb57f5ebd5f2031c7.png
[20190824151716687.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/b961c8c8b18a4e3fb9e7b5b5cb8d2701.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h0MzE0MTU5_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/adf5a662352d4a9fb76d49a5b78a2061.png
[20190824152142486.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/6f6efb9cfa2e4d37b0bbfe36d2a08d96.png
[201908241522372.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/c41d7e9078a545f49e628ab8fbaf3ed1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h0MzE0MTU5_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/1064323171d748bf9f3ebf5dfa828b65.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h0MzE0MTU5_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/9ed5bec2049e4d11961613d2d8ea20da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h0MzE0MTU5_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/6ddf44abba4b40fa9b5354900d3e0340.png
[2019082415410635.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/ea78b429496f475994c3600907a7e393.png
[20190824154128188.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/d711e02b38ee4edc9124c172eb7a0c12.png