一.安装（npm）
图片如下
1.安装路由vue-router
npm install vue-router
2.安装axios
npm install --save axios
3.安装vuex
npm install vuex --save
4.安装scss
npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass
5.安装element-ui
npm i element-ui -S
6.main.js配置
import Vue from 'vue' import App from './App' import router from './router' import axios from 'axios' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import VueRouter from 'vue-router' import Vuex from 'vuex' Vue.use(ElementUI) Vue.use(VueRouter) Vue.use(Vuex) new Vue({ el: '#app', router, components: { App }, template: '<App/>', })
二.路由配置（index.js）
图片如下
1.模块归纳
export default new Router({ routes: [ { path: '/', name: 'Login', component: Login, }, { path: '/Forget', name: 'Forget', component: Forget, }, { path: '/', component: Home, name: '用户管理', children: [ { path: '/User', component: User, name: '用户'}, { path: '/SeeEdit', component: SeeEdit, name: '用户详情'}, { path: '/Modify', component: Modify, name: '修改用户资料'}, { path: '/changepsw', component: changepsw, name: '修改密码'}, ] }, ...... ], })
2.路由切换后页面滚动位置不变bug的解决方法
export default new Router({ routes: [ ...... ], scrollBehavior (to, from, savedPosition) { // console.log(to) // to：要进入的目标路由对象，到哪里去 // console.log(from) // from：离开的路由对象，哪里来 // console.log(savedPosition) // savePosition：会记录滚动条的坐标 if(savedPosition) { return savedPosition; }else{ return {x:0,y:0} } } })
三.Cookie储存
1.建立一个cookieUtil.js的文件
//设置cookie export function setCookie(key,value) { var Days = 0.6; var exdate = new Date(); //获取时间 exdate.setTime(exdate.getTime() + Days*24*60*60*1000); //保存的天数 //字符串拼接cookie window.document.cookie = key + "=" + value + ";path=/;expires=" + exdate.toGMTString(); }; //读取cookie export function getCookie(param) { var c_param = ''; if (document.cookie.length > 0) { var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下 for (var i = 0; i < arr.length; i++) { var arr2 = arr[i].split('='); //再次切割 //判断查找相对应的值 if (arr2[0] == param) { c_param = arr2[1]; //保存到保存数据的地方 } } return c_param; } }; function padLeftZero (str) { return ('00' + str).substr(str.length); };
2.在登录界面login.vue引用这个js
//cookie import {setCookie,getCookie}from '../router/cookieUtil'
3.然后储存，取值
//储存用户信息 setCookie('sellerId', this.information.sellerId); //取值用户信息 this.sellerId = getCookie("sellerId");
4.退出登录
<button @click="Signout">退出</button>
mounted () { this.sellerId = getCookie("sellerId"); if (this.sellerId==undefined||this.sellerId=="") { this.$router.push('/') } else { } }, methods: { //退出 Signout(){ setCookie("sellerId", "", -1); this.$router.push('/') }, }
四.发送验证码
图片如下
1.html部分
<el-button :disabled="disabled" @click="sendcode" class="sendcode">{{btntxt}}</el-button>
2.js部分
export default { data() { return { disabled:false, time:0, btntxt:"发送验证码", }; }, methods: { //发送手机验证码倒计时 timer() { if (this.time > 0) { this.time--; this.btntxt=this.time+"s后重新获取"; setTimeout(this.timer, 1000); } else{ this.time=0; this.btntxt="发送验证码"; this.disabled=false; } }, } }
五.div自适应屏幕宽高
1.像后台管理系统那种格式，有顶部导航栏和左侧导航栏，而切换的那一块盒子怎么能自适应屏幕的宽高减去顶部和左侧固定的宽高呢？
html代码：
<div v-bind:style="{width: myWidth,height: myHeight}"></div>
js代码：
export default { data() { return { myWidth: (window.innerWidth - 240) + 'px', myHeight: (window.innerHeight - 100) + 'px', }; }, }
六.实时显示当前时间
图片如下
html代码
<span class="time">{{nowTime}}</span>
js代码
export default { data() { return { nowTime:"", nowWeek:"", }; }, // 创建完成时 created() { this.nowTimes(); }, methods: { //当前时间 timeFormate(timeStamp) { let year = new Date(timeStamp).getFullYear(); let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMonth() + 1): new Date(timeStamp).getMonth() + 1; let date =new Date(timeStamp).getDate() < 10? "0" + new Date(timeStamp).getDate(): new Date(timeStamp).getDate(); var week = timeStamp ? new Date(timeStamp) : new Date(); if(week.getDay() == 1){ this.nowWeek="周一" } else if(week.getDay() == 2){ this.nowWeek="周二" } else if(week.getDay() == 3){ this.nowWeek="周三" } else if(week.getDay() == 4){ this.nowWeek="周四" } else if(week.getDay() == 5){ this.nowWeek="周五" } else if(week.getDay() == 6){ this.nowWeek="周六" } else { this.nowWeek="周日" } let hh =new Date(timeStamp).getHours() < 10? "0" + new Date(timeStamp).getHours(): new Date(timeStamp).getHours(); let mm =new Date(timeStamp).getMinutes() < 10? "0" + new Date(timeStamp).getMinutes(): new Date(timeStamp).getMinutes(); this.nowTime = year + "/" + month + "/" + date +" "+ this.nowWeek +" "+ hh +":"+ mm ; // console.log(this.nowTime) clearInterval(this.Times); }, // 定时器函数 nowTimes(){ this.timeFormate(new Date()); this.Times=setInterval(this.nowTimes,1000); }, }, }
七.自定义滚动列表
图片如下
html代码
<div class="right-select"> <ul> <li>张三1</li> <li>张三2</li> <li>张三3</li> <li>张三4</li> <li>张三5</li> <li>张三6</li> <li>张三7</li> </ul> </div>
css代码
.right-select{ width: 500px; height: 105px; overflow-y: scroll; border: 1px solid #bbbbbb; border-radius: 5px; margin-left: 65px; } .right-select::-webkit-scrollbar { width: 12px; background-color: #fff; } .right-select::-webkit-scrollbar-thumb { height: 26px; background-color: #666; border-radius: 50px; } .right-select::-moz-scrollbar { width: 12px; background-color: #fff; } .right-select::-moz-scrollbar-thumb { height: 26px; background-color: #666; border-radius: 50px; }
八.判断数据列表序号
图片如下
html
<ul> <li v-for="(item,index) in list" :key="item.id" > <p class="p1">{{ index+1>9?index+1:"0"+(index+1) }}</p> <p class="p2">{{ item.name }} {{ item.id }} {{ item.source }}</p> </li> </ul>
js代码
list: [{ name: '张一', id: '1241', source: '经销商', },{ name: '张二', id: '1242', source: '业务员', },{ name: '张三', id: '1243', source: '普通用户', },{ name: '张四', id: '1244', source: '商城', }],
九.Form表单提交
html代码
<form :model="reportForm"> <input type="text" v-model="reportForm.name" placeholder="姓名"/> <input type="text" v-model="reportForm.sex" placeholder="性别"/> <input type="text" v-model="reportForm.age" placeholder="年龄"/> </form>
<button @click="sub"></button>
js代码
export default { data() { return { reportForm: { name: '', sex:'', age: '', } } }, methods: { sub() { let reportdata = this.reportForm; console.log(reportdata) } }
}
十.以后补充