目录
14.vue六种传值方式（属性传值、$refs、$parent、通知传值(广播传值)、本地传值、路由传值）
Vue脚手架中盒子高度设置问题：height:100vh; //es6语法
0.创建项目准备
检查是否安装成功：如果输出版本号，说明我们安装node环境成功
node -v
npm -v
全局安装@vue/cli
npm install -g @vue/cli
检查是否安装成功：如果输出版本号，说明我们安装node环境成功vue --version
创建项目
vue create test_vue
1.iconfont
<template>
<div>
<ul>
<!-- 方法一： -->
<li><span class="iconfont"></span></li><br>
<li><span class="iconfont"></span></li>
<li><span class="iconfont"></span></li>
<!-- 方法二 -->
<i class="iconfont icon-caidan"></i>
<i class="iconfont icon-jiazai1"></i>
<i class="iconfont icon-shangchuan"></i>
</ul>
</div>
</template>
<script>
import iconfont from '../myicon/icon-font/download/font_20dtp1i3pv6/iconfont.css'
export default {
}
</script>
<style scoped>
li>span{
width: 50px;height: 50px;
float: left;
}
</style>2. sass版本问题
1、vue中sass安装使用============================================================
方法一：
我本地是将 "sass-loader": "^8.0.0"，更换成了 "sass-loader": "^7.3.1",
卸载当前版本 npm uninstall sass-loader
安装 npm install sass-loader@7.3.1 --save-dev
方法二：
如若不行，此时运行按照提示执行 npm rebuild node-sass 命令
（如若还不行，则先运行npm install node-sass命令执行）
3.屏幕高宽度自适应
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';
}
}4. 跨域
proxyTable: {
'/admin': { //代理api
target: 'http://ceshi5.dishait.cn/admin', //服务器api地址
ws: true, // proxy websockets
changeOrigin: true, //是否跨域
pathRewrite: { //重写路径
'^/admin': ''
}
}
},5. 拦截器
//添加请求拦截器
axios.interceptors.request.use(config => {
console.log(config)
// 从sessionStorage获取token值，然后设置给请求头
config.headers.Authorization = window.sessionStorage.getItem('token')
// 在最后必须 return config
return config
})6.项目插件安装
npm i element-ui -S
npm install axios --save
npm install echarts --save
npm install vant --save
npm install vuex -s
cnpm install node-sass@4.14.1 sass-loader@7.3.1 -s7.登录鉴权（单路由）
beforeEnter(to,from,next){
if(sessionStorage.getItem("token")){
next()
}else {
alert("请先登录");
next('/')
}
},8.插件引入、持久化、字体图标、富文本、时间戳
// 引入vuex
import Vuex from 'vuex';
// 持久化=====================================================================
import VuexPersistence from 'vuex-persist' //store中引入
const vuexLocal = new VuexPersistence({ //store中引入
storage: window.localStorage
})
plugins: [vuexLocal.plugin] //store中引入
cnpm install --save vuex-persist //下载
// 引入vant组件====================================================================
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
// 引入第三方控件[分类参数]===============================================
npm i vue-table-with-tree-grid -S //下载
import TreeTable from 'vue-table-with-tree-grid' //在main.js中使用
Vue.config.productionTip = false //在main.js中使用
//全局注册组件===============================================
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 = axios9. 跳转、返回、前进和后退
编程导航
我们可以用在渲染完元素不方便添加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路由实例对象 可以实现页面的转换10.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: {
&nbs
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
