每天进步一点点---------畅购商城第二天 前台框架搭建

使用前后端分离开发，涉及Vue+ElementUI+Axios，做为专业白嫖党和完全的小白，必然边学边练，首先来一把学习资料：
最重要和最关键的学习资料，必然是官网了：
Vue官网
ElemetnUI官网
Axios官网
官网如果有不懂的可以在下面的课程中查漏补缺，codewhy的视频有项目结构和规范的部分内容
《【编程不良人】适合后端编程人员的 ElementUI教程,结合SpringBoot项目案例,已完结!!!》
《最全最新Vue、Vuejs教程，从入门到精通》

项目搭建与目录

参考codeWhy的课程，项目创建过程和目录设置如下：
(1)创建项目

vue init webpack webPro
? Project name web
? Project description test
? Author XXX
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

（2）创建工程目录
先创建目录结构，不做任何操作，

src下的目录为
	assets   //图片等资源
		css
		img
	components  // 组件
		common   //公共组件
		content
	network    // 前后端交互
		utils
		
	router     // 路由
	store     // 
	view   //页面

（3）引入ElementUI
参考自ElementUI官网->安装和快速上手章节，务必需要引入element-ui的index.css，否则样式将无法生效。

npm i element-ui -S
在main.js中引入下面的内容
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

（4）引入Axios和基本包

npm install axios --save-dev

Vue封装Axios，参考自coderWhy和一个大神的封装过程
在/network/utils目录下创建http.js和request.js，具体代码可以查看大神的博客。

基本验证

后台已经搭建goods服务，实现了brand的增删改查，使用brand的查和增做一个简单验证，验证样式为ElementUI表格和表单

brands.vue创建如下，代码还是十分的ugly，后序优化。

<template>
  <div class="brands">
    <el-button type="primary" icon="el-icon-search" @click