使用前后端分离开发,涉及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="getAl