ABP框架—前台：Vue项目启动（4）

左手的ㄟ右手 2022-01-11 07:51 329阅读 0赞

### 1.安装Node.js环境 ###

官网地址：[https://nodejs.org/en/download/][https_nodejs.org_en_download]    安装完成后，命令窗口输入：node -v，如打印版本信息则说明成功

### 2.npm安装VUE脚手架(vue-cli) ###

此步骤依赖node坏境

命令窗口输入：npm install -g vue-cli

//-g是全局安装

安装完成后，命令窗口输入：vue -V   如打印版本信息则说明成功

说明：vue -V中 V是大写

### 3.npm安装yarn ###

此步骤依赖node坏境

命令窗口输入：npm install -g yarn

安装完成后，命令窗口输入：yarn -v   如打印版本信息则说明成功

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1_size_16_color_FFFFFF_t_70][]

## ##

当node、vue、yarn都安装成功后，此时将电脑重启一下，进行下面步骤，否则可能出现下面步骤中“yarn install”安装失败。

### 4.vue项目安装依赖项 ###

打开Vue项目文件夹：在vs code  使用快捷键（CTRL + K + O）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1_size_16_color_FFFFFF_t_70 1][]

### (5)点击终端，新建终端，按下回车键，进入vue工作目录 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1_size_16_color_FFFFFF_t_70 2][]

### （6）终端命令“yarn install” 进行安装 ###

说明:下面是已经安装后的截图，如果从未执行过“yarn install”，则会与截图打印信息不一致，此步骤仅仅示例

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1_size_16_color_FFFFFF_t_70 3][]

至此，ABP项目基本配置已经完成，下一篇进行首次运行。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1_size_16_color_FFFFFF_t_70 4][]

[https_nodejs.org_en_download]: https://nodejs.org/en/download/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1_size_16_color_FFFFFF_t_70]: /images/20220111/fa25fd26dba34952832aba8e5bb371de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1_size_16_color_FFFFFF_t_70 1]: /images/20220111/2888d8b1a3314a7e944b66c49a60da40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1_size_16_color_FFFFFF_t_70 2]: /images/20220111/8a41c3fda45946c3bc5b8e3d88d0c571.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1_size_16_color_FFFFFF_t_70 3]: /images/20220111/25c097d9c84447bb9422fd505ff33835.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzE2OTk4OTQ1_size_16_color_FFFFFF_t_70 4]: /images/20220111/271ee8c822d64da0b54e3267a6193633.png