笔记1：项目初始化【Vue实战项目：电商管理系统（Element-UI）】

叁歲伎倆 2022-10-09 04:53 137阅读 0赞

### 文章目录 ###

*   *  环境准备
     *   *  安装nodejs
         *  安装vue
         *  安装vue-cli脚手架构建工具
     *  通过Vue脚手架创建项目
     *  配置Element-UI组件库
     *  配置axios

## 环境准备 ##

### 安装nodejs ###

在[官网][Link 1]直接下载安装即可

*  验证安装成功

node -v

### 安装vue ###

npm install vue

*  验证安装成功

npm list vue

### 安装vue-cli脚手架构建工具 ###

*  安装

npm install -g vue-cli

*  验证安装成功

vue -V

## 通过Vue脚手架创建项目 ##

*  启动脚手架GUI界面

vue ui

*  填写项目名称

> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70]

*  选择项目配置

>  *  Babel
>  *  Router
>  *  使用配置文件

*  点击创建项目

> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 1]

## 配置Element-UI组件库 ##

*  项目仪表盘 --> 插件 --> 添加插件
 *  搜索 `vue-cli-plugin-element` 并下载
 *  配置插件

> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 2]

*  安装完成

> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 3]

## 配置axios ##

*  项目仪表盘 --> 依赖 --> 添加依赖
 *  搜索`axios`并下载
 *  安装完成

> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 4]

[Link 1]: https://nodejs.org/en/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70]: /images/20221005/d02280ef26e84379b7fa120e21dbd3eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 1]: /images/20221005/4ccd75c63c764b97b467d2755a6aaaca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 2]: /images/20221005/353bd3f4cc5f41abb7c3ca285fba29e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 3]: /images/20221005/3afc24fb08054a049f5fe3c933eb4aed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R0NzUyODE5MjA_size_16_color_FFFFFF_t_70 4]: /images/20221005/830fe0f6827f4846bbae5a2a4f7f0a36.png