2021 Vue全家桶开发电商管理系统（Element-UI）01-项目初始化

水深无声 2023-01-03 01:48 160阅读 0赞

# 电商后台管理系统——项目初始化篇 #

## 前言 ##

前端用到的技术栈

*  Vue
 *  Vue-router
 *  Element-UI
 *  Axios
 *  Echarts

## 1 项目初始化 ##

### 1.1 前端项目初始化步骤 ###

*  安装 Vue 脚手架
 *  通过 Vue 脚手架创建项目
 *  配置 Vue 路由
 *  配置 Element-UI 组件库
 *  配置 axios 库
 *  初始化 git 远程仓库
 *  将本地项目托管到Github或码云中

在本项目中，使用可视化项目管理ui界面进行项目创建和管理，在cmd中输入

vue ui

即可开启UI界面。

## 2 项目管理 ##

### 2.1 创建项目 ###

点击左下角的更多→Vue项目管理器→创建→自行选择路径后，点击创建此项目→输入项目名，点击下一步  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][2021010618352710.png_pic_center]  
![在这里插入图片描述][20210106183537748.png_pic_center]

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

第一次开发的话，就没有原来的预设，这里我们就手动配置我们的项目了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 2]

依次将下面几个功能打开，Linter最好不要打开！！！最后那个使用配置文件是很重要的，一定要选上

![在这里插入图片描述][20210106183705854.png_pic_center]  
![在这里插入图片描述][20210106183717809.png_pic_center]  
![在这里插入图片描述][20210106183731399.png_pic_center]

### 2.2 安装相关插件 ###

进入项目仪表盘，然后点击插件，点击“添加插件”，输入以下内容

vue-cli-plugin-element

选中之后，点击右下角安装按钮即可

*  接着，就是我们对element进行插件配置，如下图：  
    对这个插件按需导入，否则会冗余  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 3]

### 2.3 安装新的依赖（配置 axios 库） ###

返回之前的界面，我们选择依赖→安装依赖，然后输入axios，注意我们这里选的是运行依赖。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 4]

## 最后 ##

到此，我们Vue项目初始化就结束了，接下来看下一篇博客吧

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/57afc32227bd40db9a798d81836dbbbb.png
[2021010618352710.png_pic_center]: /images/20221119/6a140195c700442c8dd803d518631c21.png
[20210106183537748.png_pic_center]: /images/20221119/e317f2b387d74004bc81bb21d554e720.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221119/6de1e8a251b54ec387ef88feff8d7d83.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221119/4cd1306297cb43e78eb7121d52af8b9a.png
[20210106183705854.png_pic_center]: /images/20221119/8e29c212e34a409fb63119f9ecc69abc.png
[20210106183717809.png_pic_center]: /images/20221119/d87b399efbbe4ee8a275f05cabcdbb03.png
[20210106183731399.png_pic_center]: /images/20221119/4fb13db96f374a88b217d2c0e45fef53.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221119/7de6cf97c92b4edf9db293105a24fd0f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzc4Njc1Ng_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221119/f737310f7b1e4b7c9cace8b656c8e77b.png