Vue脚手架中盒子高度设置问题：height:100vh; //es6语法
1、vue中sass安装使用============================================================
npm install node-sass -D
npm install [email protected] --save-dev
卸载sass-loader：npm uninstall sass-loader
快捷安装：cnpm install [email protected] [email protected] -s
在build->webpack.base.conf.js添加配置：
{
test: /\.sass$/,
loaders: ['style', 'css', 'sass']
}
标签使用
<style lang="scss" scope> </style>2.屏幕高宽度自适应==================================================================
mounted() {
// 调用自动调节
this.fc_height();
},
methods: {
// 获取屏幕宽高自动调节
fc_height() {
let html = document.documentElement || document.body;
let height = html.clientHeight - 60;
let aside = document.querySelector('.el-aside');
aside.style.height = height + 'px';
}
}3.跨域======================================================================
proxyTable: {
'/admin': { //代理api
target: 'http://ceshi5.dishait.cn/admin', //服务器api地址
ws: true, // proxy websockets
changeOrigin: true, //是否跨域
pathRewrite: { //重写路径
'^/admin': ''
}
}
},4.拦截器======================================================================
//添加请求拦截器
axios.interceptors.request.use(config => {
console.log(config)
// 从sessionStorage获取token值，然后设置给请求头
config.headers.Authorization = window.sessionStorage.getItem('token')
// 在最后必须 return config
return config
})5.安装================================================================
npm i element-ui -S
npm install axios --save
npm install echarts --save
npm install vant --save
npm install vuex -s
cnpm install [email protected] [email protected] -s
5.1登录鉴权（单路由）
// 注意===================================================================
beforeEnter(to,from,next){
if(sessionStorage.getItem("token")){
next()
}else {
alert("请先登录");
next('/')
}
},6.全部引入====================================================================
// 引入vuex
import Vuex from 'vuex';
// 持久化
import VuexPersistence from 'vuex-persist'
const vuexLocal = new VuexPersistence({
storage: window.localStorage
})
plugins: [vuexLocal.plugin]
cnpm install --save vuex-persist
// 引入vant组件
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
// 引入第三方控件[分类参数]
import TreeTable from 'vue-table-with-tree-grid'
Vue.config.productionTip = false
//全局注册组件
Vue.component("tree-table", TreeTable)
// 导入字体图标
import './assets/fonts/iconfont.css'
// 导入富文本编辑器（用法）
import VueQuillEditor from 'vue-quill-editor'
// require styles 导入富文本编辑器对应的样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 将富文本编辑器，注册为全局可用的组件
Vue.use(VueQuillEditor)
// 时间戳转换
Vue.filter('dateFormat', function(originVal) {
const dt = new Date(originVal)
const y = dt.getFullYear()
const m = (dt.getMonth() + 1 + '').padStart(2, '0')
const d = (dt.getDate() + '').padStart(2, '0')
const hh = (dt.getHours() + '').padStart(2, '0')
const mm = (dt.getMinutes() + '').padStart(2, '0')
const ss = (dt.getSeconds() + '').padStart(2, '0')
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})
// 引入ElementUI组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
//Echarts图表引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
//引入axios和配置请求根路径
import axios from 'axios'
axios.defaults.baseURL = 'https://www.liulongbin.top:8888/api/private/v1'
// 添加请求拦截器
axios.interceptors.request.use(config => {
console.log(config)
// 从sessionStorage获取token值，然后设置给请求头
config.headers.Authorization = window.sessionStorage.getItem('token')
// 在最后必须 return config
return config
})
Vue.prototype.$http = axios7.编程式导航==========================================================
vue中除了页面导航还提供我们一种导航方式 叫做编程导航
我们可以用在渲染完元素不方便添加router-link的使用
编程导航提供的方法：
this.$router.push(路径) 跳转到哪个路由
this.$router.go(-1) 返回上一级
vue还提供一种方式 来实现导航 编程式导航 在事件中通过this.$router的方法来实现
我们主要掌握的方法
push() 进入到哪个页面
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
go(-num) 返回哪个页面
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)
replace()
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。 没有办法使用go()返回了
this.$route 和this.$router的区别：
this.$route 路由信息对象 可以获取参数列表
this.$router路由实例对象 可以实现页面的转换在最后讲一下图表，可能有些小伙伴用不到，随后可以在更吧。。。
//echarts图表的使用
<template>
<div class="data_report">
<div id="main" style="width: 600px;height:400px;">
</div>
</div>
</template><script>
let echarts = require('echarts');
export default {
mounted() {
this.fc_echarts();
},
methods: {
fc_echarts() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
console.log(myChart);
// 绘制图表
// 指定图表的配置项和数据
let option = {
// title: {
// text: '堆叠区域图'
// },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
areaStyle: {},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
areaStyle: {},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
stack: '总量',
areaStyle: {},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
stack: '总量',
areaStyle: {},
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
label: {
normal: {
show: true,
position: 'top'
}
},
areaStyle: {},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
}
};
</script><style scoped>
#main{
position: absolute;
left: 313px;
top: 126px;
width: 700px;
height: 500px;
}
</style>