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

使用前后端分离开发，涉及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，后序优化。

执行npm run build,会在dist目录多出前台的静态文件，在linux虚拟机中安装nginx

wget http://nginx.org/download/nginx-1.13.7.tar.gz
 tar -xvf nginx-1.13.7.tar.gz
 ./configure
 make
 make install
 whereis nginx  // 查看nginx的安装目录

nginx安装完成后，远程查看网址如下：

将静态文件放入到html目录，重新启动nginx后，查看页面如下：

验证后，发现可以生效。

（1）未引入ElementUI的index.css样式，造成ElementUI部分组件不正确，样式不正确
（2）新建vue中template中必须加div，否则多个标签时会报需要同一个根的错误
（3）ElementUI的model属性为数据对象，还未使用rules进行校验

（4）Axios已经配置了baseURL和timeout，可以直接使用，遇到postMan可以调通，但是遇到token验证，无法调通的情况，因此request.js先去掉token部分