### projects to build
vue create my_cms Babel Router Vuex CSS Use history mode for router? n Sass/SCSS (with dart-sass) In package.json Save this as a preset for future projects? n
### Plug
above sea level and component-ui Axios js- cookies mockjs
babel install npm -plugin-introduction of the Component -D ---- Demand
### elementUI use
① install the plugin:
npm element- to young
npm install babel-plugin-component -D
② Configuration babel.config.js (demand loading, modify to restart):
"plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ]
③src under the new common / components / index.js, a complete list of components and adding methods (introduced into the actual work demand):
Import View from 'view' ; import { Pagination, Dialog, Autocomplete, Dropdown, DropdownMenu, DropdownItem, Menu, Submenu, MenuItem, MenuItemGroup, Input, InputNumber, Radio, RadioGroup, RadioButton, Checkbox, CheckboxButton, CheckboxGroup, Switch, Select, Option, OptionGroup, Button, ButtonGroup, Table, TableColumn, DatePicker, TimeSelect, TimePicker, Popover, Tooltip, Breadcrumb, BreadcrumbItem, Form, FormItem, Tabs, TabPane, Tag, Tree, Alert, Slider, Icon, Row, Col, Upload, Progress, Spinner, Badge, Card, Rate, Steps, Step, Carousel, CarouselItem, Collapse, CollapseItem, Cascader, ColorPicker, Transfer, Container, Header, Aside, Main, Footer, Timeline, TimelineItem, Link, Divider, Image, Calendar, Backtop, PageHeader, CascaderPanel, Loading, MessageBox, Message, Notification } from 'element-ui'; Vue.use(Pagination); Vue.use(Dialog); Vue.use(Autocomplete); Vue.use(Dropdown); Vue.use(DropdownMenu); Vue.use(DropdownItem); Vue.use (Menu); Vue.use(Submenu); Vue.use(MenuItem); Vue.use(MenuItemGroup); Vue.use(Input); Vue.use(InputNumber); Vue.use(Radio); Vue.use(RadioGroup); Vue.use(RadioButton); Vue.use(Checkbox); Vue.use(CheckboxButton); Vue.use(CheckboxGroup); Vue.use(Switch); Vue.use(Select); Vue.use(Option); Vue.use(OptionGroup); Vue.use(Button); Vue.use(ButtonGroup); Vue.use(Table); Vue.use(TableColumn); Vue.use(DatePicker); Vue.use(TimeSelect); Vue.use(TimePicker); Vue.use(Popover); Vue.use(Tooltip); Vue.use(Breadcrumb); Vue.use(BreadcrumbItem); Vue.use(Form); Vue.use(FormItem); Vue.use (Tabs); Vue.use(TabPane); Vue.use (day); Vue.use(Tree); Vue.use(Alert); Vue.use(Slider); Vue.use(Icon); Vue.use(Row); Vue.use(Col); Vue.use(Upload); Vue.use(Progress); Vue.use(Spinner); Vue.use(Badge); Vue.use(Card); Vue.use(Rate); Vue.use(Steps); Vue.use(Step); Vue.use(Carousel); Vue.use(CarouselItem); Vue.use(Collapse); Vue.use(CollapseItem); Vue.use (Cascader); Vue.use(ColorPicker); Vue.use(Transfer); Vue.use(Container); Vue.use(Header); Vue.use(Aside); Vue.use(Main); Vue.use(Footer); Vue.use(Timeline); Vue.use(TimelineItem); Vue.use(Link); Vue.use(Divider); Vue.use(Image); Vue.use(Calendar); Vue.use(Backtop); Vue.use(PageHeader); Vue.use(CascaderPanel); Vue.use(Loading.directive); Vue.prototype.$loading = Loading.service; Vue.prototype.$msgbox = MessageBox; Vue.prototype.$alert = MessageBox.alert; Vue.prototype.$confirm = MessageBox.confirm; Vue.prototype.$prompt = MessageBox.prompt; Vue.prototype.$notify = Notification; Vue.prototype $ message. = Post;
④main.js introduced:
import "@common/components/index.js";
⑤pages / Layout / index.vue elementUI components may be used directly in:
<el-container> <el-aside width="200px"> <SliderTabBar /> </el-aside> <el-container> <el-header>Header</el-header> <el-main> <Container /> </el-main> </el-container> </el-container>
### elementUI placed paragraph
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" > <!-- 二级路由 --> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></ Navigation a>span<>I </span> </template> <el-menu-item index="1-4-1">选项1</el-menu-item> <el-menu-item index="1-4-2">选项1</el-menu-item> <el-menu-item index="1-4-3">选项1</el-menu-item> </el-submenu> <!-- 没有子标题 --> <el-menu-item index="2"> <i class="el-icon-menu"></i> <span slot="title">导航二</span> </el-menu-item> </el-menu>
annotation:
1, el-menu Tags: wrap the menu bar
2, el-submenu Tags: two routing parcels
3, el-menu-item tags: only you, no children
4, template Tags: two routes title
Configuration items:
default-active = "2" is selected by default index entries
@ Open = "handleOpen" open when the trigger function
Functions @ close = "handleClose" close when triggered
active-text-color = "# ffd04b" selected text color
### SliderTabBar.vue rendering
<template v-for="item in sliders"> <!-- 二级路由 --> <el-submenu :index="item.path" :key="item.path" v-if="item.children&&item.children.length>0"> <template slot="title"> <i class="el-icon-location"></i> <span>导航一</span> </template> <</Option 1>= "1-4-1"indexItem-MENU-ELel-menu-item> <el-menu-item index="1-4-2">选项1</el-menu-item> <el-menu-item index="1-4-3">选项1</el-menu-item> </el-submenu> <!-- 没有子标题 --> <el-menu-item :index="item.path" :key="item.path" v-else> <i class="el-icon-menu"></i> <span slot="title">导航二</span> </el-menu-item> </template>
note:
1, the navigation configuration items are generally returned by the backend, not to write front-end dead.
2, because some navigation ribbon ***-class routing, navigation and some without, in a separate area traversed when needed, can be used with v-else use with v-if, and v-if lower priority than v- for, Talia not be used together, so that the outer layer of the nested label template for doing traverse.
3, index is a unique identifier, corresponding to the key value.
4, to use the font icon prepend i tags: <i: class = "item.icon"> </ i>
### SliderTabBar.vue selected by default
①data variables defined defaultActive / home:
defaultActive:"/home",
② set the default value of default-active defaultActive:
:default-active="defaultActive"
③ * watch monitor routing Jump to:
watch: { "$route":{ handler(newValue,oldValue){ this.defaultActive=newValue.path; }, immediate:true } }
### routing switcher
SliderTabBar.vue page, add a click event in el-menu-item tags, navigation Jump with programmed route.
① If there is a sub-class routing add @ click = "handlePush (child.path)"
If there are no children routing add @ click = "handlePush (item.path)"
② event functions:
methods: { handlePush(path){ this.$router.push(path); } }
### projects login background login interface to analog data -mock
Under the new ①utils utils.js, derived quertObject () method is used to transfer the parameter to the url field object format:
export const quertObject=(url)=>{ let queryString=url.split("?")[1]; let obj={}; let arr=queryString.split("&"); for(let i=0;i<arr.length;i++){ let key=arr[i].split("=")[0]; let value=arr[i].split("=")[1]; obj[key]=value; } return obj; }
②src under the new mock / index.js, the analog back-end interface that defines url, request way get, the username and password are correct is determined:
import Mock from "mockjs";
import {quertObject} from "@utils/utils.js";
/* Login Interface */ Mock.mock(/\/user\/login/,"get",(options)=>{ let obj=quertObject(options.url); if(obj.username=="admin"&&obj.password=="admin"){ return { code:200, data:{ authToken:"adfadfasf" } } }else{ return{ code:500, data:{ info: "user name or password is incorrect." } } } })
③ After completion mock mock data definition must be incorporated in the main.js:
import "@mock/index.js";
④utils under the new request.js, were axios intercept:
import axios from "axios"; // import loading from "@plugins/Loading/index.js"; import Vue from 'vue'; // import loading from "" console.log(Vue) const http=axios.create({ timeout:5000, withCredentials: to true , // allowed token // the baseUrl: "" }); http.interceptors.request.use(config=>{ if(config.method=="get"){ config.params={...config.data}; } // config.headers["authToken"]=store.token; // 开启loading // loading.show(); return config; },(err)=>{ return Promise.reject(err); }); http.interceptors.response.use(config=>{ if(config.status==200){ // 关闭loading // loading.hide(); return config.data; } },(err)=>{ return Promise.reject(err); }); export default http;
⑤api under the new request.js, loginApi method defined in mock address request, the request method GET format defined mock derived loginApi method:
import http from "@utils/request.js"; export const loginApi=(loginModel)=>{ return http({ method:"get", url:"/user/login", data:loginModel }) }
⑥Login / index.vue introduced loginApi methods, when you click the login button, the data request, will fill in the current username and password with the past, the return value, if the code is 200, then prompted to log in successfully, and save authToken and routed Jump:
import { loginApi } from "@api/request.js";
methods: {
async handleLogin() {
let data = await loginApi(this.login_model);
if (data.code == 200) {
this.$message({
the Message: "login success" ,
type: "success",
onClose:()=>{
// 保存authToken
this.$store.commit("handleAuthToken",data.data.authToken);
this.$router.push("/home");
}
});
}else{
this.$message.error(data.data.info);
}
}
}
⑦store / index.js, the stored token (With js-cookie plugin):
import Cookies from "js-cookie";
state:{ authToken:Cookies.get("token")||"" }, mutations:{ handleAuthToken(state,params){ state.authToken=params; Cookies.set("token",state.authToken); } }