使用Vue脚手架编写一个后台管理系统页面

一、创建项目

首先我们要先安装Vue脚手架，vue-cli。打开CMD命令行输入下面的指令安装。

npm install -g @vue/cli
# OR
yarn global add @vue/cli

然后输入 vue ui 指令打开创建vue脚手架的图形界面。在自己指定的目录下创建一个新的项目，然后输入 init -y 初始化项目。

然后选择手动配置项目，根据自己的需求安装响应的插件(我安装了Babel、Router、Linter和使用配置文件)，然后配置如下

然后等待项目创建就行了。项目安装完成之后我们还要安装相关的插件和依赖，比如(element-ui插架、依赖和axios依赖，依赖安装在运行依赖下面)，安装element插件的时候我们只好选择按需导入我们需要的模块，这样可以使我们的项目更加小。

然后我们就在服务栏中点解serve运行项目，没有报错后我们就启动app,这样一个vue脚手架项目已经搭建好了。

二、前期准备

我们使用的是别人提供的一个在线后台接口，后台接口的创立可参考下面。 https://blog.csdn.net/krous/article/details/104419865，然后接口地址为：http://106.12.11.162:8888/api/private/v1，然后我们使用postman工具测试后台接口是否可用。

然后我们打开我们的开发工具，把component中那些默认存在的单文件组件删掉，然后把跟组件App.vue中的东西清空，恢复初始化状态。然后为了我们敲代码时格式化代码格式的时候，自动补全(;),然而这在ESLInt语法中会报错，所以我们要在根目录下新建一个 .prettierrc 的文件，让我们在格式化代码时，不在自动补全(;)

然后我们在App.vue根组件中放一个路由占位符，用来显示我们的登录单文件组件，如果不使用路由占位符，则无法把我们的路由页面显示出来。

然后我们在components文件夹中创建一个Login.vue文件，用来编写登录的界面，然后再router文件夹中的index.js文件中导入这个单文件组件，然后声明它的路由规则，然后我们把跟路由重定向登录界面上，使用redirect关键字。如果实在一个路由中嵌套子路由，则需要使用children关键字。

然后我们的Login.vue中使用element-ui中的form表单，但是由于之前我们安装element插件时是按需导入，所以我们要到plugins文件夹中的element.js文件夹中导入我们的form表单，不然会报错。

然后我们的样式使用 带scope关键字的less样式，然后我们要回到我们的脚手架图形界面中，在开发依赖中安装less和less-loader依赖。

然后就是无论我们要导入任何的外部文件，我们都必须要在根目录下的main.js入口文件中生命。

接下来就是关于axios的使用。我们必须先要在main.js中导入并声明才可以使用，我们还可以自定义使用的关键字。

然后我们为了防止别人不登录直接通过路径直接访问我们的后台页面，我们根据后台返回来的token设置一个axios拦截器。在每次对后台数据进行交互的时候，先要进行判断是否已经登录，如果没有则把页面重定向到登录页面。在main.js中设置拦截器，人后早router的index.js中挂载路由守卫。

详细的代码请到https://gitee.com/ZJ_GUO/vue_shop下载