电商管理系统-项目的初始化-Vue&element

学习目标：

掌握vue的可视化界面进行初始化

---

学习内容：

利用黑窗口，打开vue的可视化界面，进而利用可视化界面进行项目开发的初始化。

---

前端项目初始化步骤：

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

---

准备工作：

Windows+R→输入cmd→输入vue ui→启动GUI页面

---

 

具体实现

1、创建项目

2、输入项目名称（注意必须为英文以及下划线组成）

 另外，需要初始化Git仓库，按钮默认开启，只需要输入init project即可，然后点击下一步

 3、进入预设面板

 如果曾经创建并保存过项目，可以直接选择使用，例如这里我已经创建过vue_shop_present。

在这里，我们选择手动，进行配置

点击手动→下一步

选择如下：

• Babel
• vue-router
• Linter/Formatter:可以进行源代码的格式校验
• 使用配置文件：可以将不同的配置单独地存放为一个配置文件

选择完成后点击下一步

4、配置面板

 在该页面，首先，要关闭Use history mode for router 按钮；将Pick a  linter/formatter config （配置文件格式）选择为标准状态；最后选择Lint on save，即只要我们按了Ctrl+S，就会自动校验代码格式。

5、点击创建项目

得到如下页面

 

如果需要保存预设的话，在预设名输入框输入自己需要保留的预设名，然后点击“保存预设并创建项目”；否则，直接点击“创建项目，不保存预设” 。这里我们选择输入“vue-shop-present”并“保存预设并创建项目”。

6、配置Element-UI组件库

 打开项目的仪表盘→进入插件页面

 点击右上角的“+添加插件”→再输入框输入“vue-cli-plugin-element”→找到对应的插件进行安装

 安装完成后，需要进行插件的配置：

 首先，将完全导入转换为按需导入，因为完整导入会使整个项目显得比较累赘；其次，第二个为语言模式，直接使用默认的中文即可。修改完成后，点击完成安装即可。

7、安装axios

点击“依赖”，进入依赖页面

 点击安装依赖→输入axios→选中axios（注意是运行依赖）→点击axios即可