Gemeinsame Komponenten von vue: 2. axios; 5. vue-echarts; - Vorschau und so weiter.
Die Betriebsumgebung dieses Artikels: Windows7-System, Vue-Version 2.5.17, DELL G3-Computer.
Was sind die gemeinsamen Bestandteile von Vue?
vue – Gemeinsame Komponenten, die Sie beherrschen müssen (unter Aktualisierung)
Wichtige Dinge, die Sie beim Lesen dieses Artikels beachten sollten
Alle Komponentenbeispiele in diesem Artikel basieren auf vuecli2. Die meisten dieser Komponenten verwenden die Methode vue.use().
Hier finden Sie eine Erklärung, warum vue.use() verwendet wird. Denn wenn das Plug-in eine Methode ist,
müssen wir die Methode nur im Vue-Prototyp definieren, um sie zu verwenden:
import axios from 'axios'
Vue.prototype.axios = axios
Nach dem Login kopieren
Nach dem Login kopieren
Aber wenn das Plug-in ein Objekt ist, müssen wir das Objekt über vue.use einführen () ：
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
Nach dem Login kopieren
ok, dann beginnen wir mit den Kernkomponenten des Vue Family Bucket.
Kernkomponenten
Routing: vue-route
Bruder Long hat viele Freunde, die aufgegeben haben, als sie beim Erlernen von Vue zum Routenschritt kamen. Da es sehr schwierig ist, Routen zu erklären, beweist die Existenz von Routen, dass es sich bei dem, was wir tun, um eine SPA-Einzelseitenanwendung handelt und nicht um viele statische HTML-Seiten.
Was genau ist eine Route? Lassen wir den Server hinter uns. Mit anderen Worten: Sie wissen, was Reaktionsfähigkeit ist. Responsive Layout, fragen Sie das Mobiltelefonmodell und die Bildschirmauflösung der anderen Partei über die Medien ab und ändern Sie den Anzeigestil für sie.
route Sie können verstehen, dass es sich um die „Medienabfrage“ der URL handelt. Durch Eingabe verschiedener Pfade in die URL können Sie auf verschiedene Vue-Seiten reagieren.
Zuerst öffnen wir die Datei main.js in vuecli und stellen fest, dass die Route hier eingeführt und für vue konfiguriert ist.
//第一步引入route，form后面是你的route文件地址
import router from './router'
//加载route
new Vue({
el: '#app',
render: h => h(App), //h=createElement 即渲染app中所有节点
router, //route是在这一步装载到vue中的
store,
components: {
App
},
template: '<App/>',
})Nach dem Login kopieren
Wir sind dem Beispiel gefolgt und haben die Konfigurationsdatei index.js dieser Route gefunden. Wir können feststellen, dass alles für den Zugriff auf die URL konfiguriert ist.
import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [{
path: '/',
name: 'index',
component: index
}]
})Nach dem Login kopieren
Wenn Sie Schwierigkeiten damit haben, können Sie direkt ein paar weitere Pfadabschnitte in diese Route kopieren und dann den Pfad in Ihren eigenen ändern.
Hier ist zu beachten, dass Route auch die Funktionen Sub-Routing und Routenaufteilung umfasst. Bitte beachten Sie Long Ges ausführliches Tutorial zu Vue-Route.
Asynchrone Datenanforderung: axios
Erinnern Sie sich an diese Methode in jquery?
$.ajax()
Nach dem Login kopieren
Es ist eigentlich ein Wrapper für die native Ajax-Methode in Javascript.
axios ist dasselbe, funktioniert aber in Vue. Die Einführungsmethode unterscheidet sich von der Route, da es sich lediglich um eine Reihe von Methoden handelt, sodass wir sie direkt im Prototyp von Vue definieren können.
Zuerst installieren wir es über npm:
npm install axios -s-d
Nach dem Login kopieren
Dann öffnen wir main.js:
import axios from 'axios'
Vue.prototype.axios = axios
Nach dem Login kopieren
Nach dem Login kopieren
Beim Aufruf können Sie es in den Lebenszyklus schreiben, z. B. Methoden oder gemountet.
let that = this;
this.axios({
method: 'get',//请求方式
url: 'URL',//请求地址
params: {
id: this.$route.query.id//发送的参数
}
}).then(function(response) {
//请求成功后获得的内容进行哪些操作
that.title = response.data.result[0].title
})Nach dem Login kopieren
Darüber hinaus können Sie Axios auch verwenden, um beim Packen zwischen Online- und Offline-Umgebungen zu unterscheiden
//配置axios区别线上和测试环境
if (location.hostname === 'localhost') {
axios.defaults.baseURL = process.env.API_PATH_TEST;
//配置本地webSocketIO地址
Vue.use(new VueSocketIO({
debug: false,
connection: 'localhost',
}))
} else if (location.hostname === 'www.dangyunlong.com') {
//配置线上webSocketIO地址
Vue.use(new VueSocketIO({
debug: false,
connection: 'www.dangyunlong.com',
}))
axios.defaults.baseURL = process.env.API_PATH_PROD
}Nach dem Login kopieren
vuex-Statusverwaltung
Verwenden Sie zunächst npm zur Installation:
npm i vuex --save
Nach dem Login kopieren
Bei der Verwendung von Vuex müssen wir uns im src-Verzeichnis befinden Erstellen Sie einen neuen Store-Ordner und erstellen Sie darin unseren Statusbaum js.
Und führe es in main.js ein
//加载vue store
import store from './store'
new Vue({
el: '#app',
render: h => h(App),
router,
store,
components: {
App
},
template: '<App/>'
})Nach dem Login kopieren
Von hier aus können wir leicht erkennen, dass Vuex auf Store basiert. Darüber hinaus ist Vuex immer noch ein einzelner Zustandsbaum. Wie konfiguriere ich also den Store-Statusbaum?
Öffnen Sie diese index.js im Store
export default new Vuex.Store({
state: {
name: "dangyunlong",
age: 30,
index: {} //首页信息
},
getters:{
//getters 相当于是vuex的计算属性,主要作用是对state中的值进行处理
jia(state,num){
return state.age + 1;
},
jian(state,num){
return state.age - 1;
}
},
mutations: {
//vuex用于修改state中数据的方法
gaiming(state, name) {
state.name = name
},
getIndex(state, indexData) {
state.index = indexData
}
},
actions:{
//actions 用于异步执行vuex mutations中的方法 它不会直接修改state而是作用于mutations
//actions 中的方法可以接收一个context参数,这里的context就指vuex
increment (context) {
setTimeout(function(){
//调用方式跟在.vue中一样
context.commit('gaiming',"abc")
//1秒后调用mutations中的gaiming方法,名字已经修改了
console.log(context.state.name);
}, 1000)
}
},
modules: {
// 子状态树
a: model1
}
});Nach dem Login kopieren
Wir können feststellen, dass der Store tatsächlich hauptsächlich auf diese 5 Parameter angewiesen ist, um zu funktionieren:
| Parametername |
Funktion |
| Status |
Daten |
| Getter |
Entspricht den berechneten Eigenschaften von Vuex und wird hauptsächlich zum Berechnen und Verarbeiten von Werten verwendet. |
| Mutationen |
Methoden zum Ändern von Vuex-Werten in Methode |
| Module |
Wenn Sie bereit sind, den Zustandsbaum in mehrere Module zu unterteilen, werden Module zum Speichern des Unterzustandsbaums verwendet |
|
子状态树的写法也完全一样：
const model1 = {
state: {
name: "longge",
age:31
},
getters:{
},
mutations: {
},
actions:{
}
};
export default model1;Nach dem Login kopieren 混入其中的高手冷门知识
vuex有一个鲜为人知的辅助方法：mapState
computed:mapState({
ageadd (state) {
return state.count + this.localCount
}
}),Nach dem Login kopieren 有很多同学不知道这个函数是干啥用的，龙哥用最简单的方法来介绍一下，这里涉及到了computed这个比较常用的vue属性，这个东西就是前面提到的计算属性，它主要是在不改变原始值的情况下对值做一些处理。
如果，你一个一个通过
this.$store.state.xx Nach dem Login kopieren 的当时去调用store的值放到这个计算属性里面，你不是老得写这个this.$store吗。于是vuex官方就提供了一个让你可以省略前面这一段的方法。你可以通过这个方式一次获得所有store中的state中的数据，然后传入state直接用就行了。
这里面还有一个混入写法...mapState。各位观众老爷请到龙哥vuex详细教程中找一下，这里就不过多介绍了。
UI库
Element UI
依然使用npm进行安装，当然如果你有cnpm就更好了：
cnpm install element-ui -s-d Nach dem Login kopieren element作为你必须掌握的ui库，它和iview的区别再于用户量更大，研发团队人员更多，发现错误的机率更高，在组件支持项中也超过iview。更屌的是element还支持Sketch和Axure，让产品经理和设计师也能从容参与到开发中来。所以element成为了本文首选。
引入element ui的方式也非常简单，通过npm安装后，打开main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI); Nach dem Login kopieren 调用的时候也非常简单：
<el-menu default-active="1" class="el-menu-vertical-demo">
<el-submenu index="1">
<template slot="title">
<img src="">
<span></span>
</template>
<el-menu-item-group>
<template slot="title"></template>
<el-menu-item index="1-1"></el-menu-item>
<el-menu-item index="1-2"></el-menu-item>
<el-menu-item index="1-3"></el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu> Nach dem Login kopieren 直接把这种el开头的标签插入到你的.vue文件中即可。
element支持的组件非常多，你可以查看这里，里面的组件代码已经写的非常清楚了，直接复制粘贴到你的.vue中即可。
焦点图 / 轮播图
swiper
你可能会问了，轮播图组件多了去了，为什么就介绍swiper呢？因为龙哥过去在制作非spa页面的时候，对swiper可以说是情有独钟，无论是兼容性还是在移动/非移动端，swiper的表现都可圈可点。官方提供完整的api手册，让扩展修改也非常得心应手。
使用cnpm安装
cnpm install swiper -S -d Nach dem Login kopieren 安装完毕以后，我们需要把swiper封装成一个组件。这个是非常简单的，新建一个swiper.vue即可。
<template>
<p>
<p class="swiper-container">
<p class="swiper-wrapper">
<p class="swiper-slide">Slide 1</p>
<p class="swiper-slide">Slide 2</p>
<p class="swiper-slide">Slide 3</p>
</p>
</p>
</p>
</template>
<script>
import Swiper from "swiper";
export default{
name:"swiper",
mounted(){
var mySwiper = new Swiper ('.swiper-container', {
})
}
}
</script>
<style>
@import 'swiper/css/swiper.css';
.swiper-container {
width: 600px;
height: 300px;
}
</style>Nach dem Login kopieren 因为是局部的，我们甚至都不需要再main中去引入它。用的时候直接定义到components上即可。
components: {
swiper
},Nach dem Login kopieren 然后把标签写到你的项目中：
<swiper></swiper> Nach dem Login kopieren 图表
vue-echarts
vue-echarts是echarts的一个封装，它和百度echarts的区别在于，它是基于vue的一个对象..操作上更加的简单，如果你仅仅是为了展示图表，建议你使用vue-echarts。但是如果你的项目中含有对echarts的深度定制，例如改变了原始图表的展示方式或者点击事件和较为复杂的逻辑，还是建议你使用百度echarts。
安装方式跟其他vue组件一样：
npm install echarts vue-echarts Nach dem Login kopieren 然后打开main.js输入
import ECharts from 'vue-echarts';
import 'echarts/lib/chart/line';
Vue.component('chart', ECharts);Nach dem Login kopieren 这样vue-echarts就变成了一个全局组件，我们直接在页面中调用即可。
<chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart> Nach dem Login kopieren 另外在data中添加一个配置文件的变量，再mounted生命周期中注入内容即可。
export default {
name: 'index',
data() {
return {
orgOptions: {},
}
},
mounted: function() {
//echarts
this.orgOptions = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
}
},
}Nach dem Login kopieren 其中具体图表设置请查看这里。
你可以下载其中的例子然后打开http://localhost:8080/demo查看。
视频播放
vue-video-player
vue-video-player是一个视频播放解决方案，功能非常全。
使用cnpm命令安装，可以加快安装速度。
cnpm install vue-video-player -S -d Nach dem Login kopieren 然后老规矩打开main.js填入以下内容：
import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)Nach dem Login kopieren 然后在我们要使用的页面上：
<video-player class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
></video-player> Nach dem Login kopieren 最后增加一个配置变量：
playerOptions : {
playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
autoplay: false, //如果true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 导致视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
sources: [{
type: "",//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
src: "" //url地址
}],
poster: "../../static/images/test.jpg", //你的封面地址
// width: document.documentElement.clientWidth, //播放器宽度
notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timepider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true //全屏按钮
}
}Nach dem Login kopieren 每次要切换视频的时候，修改src即可。
相册
vue-photo-preview
有的时候，我们会遇到一个需求，就是把小图放大或者多个图片方大后轮播的情况，这个时候用element ui中自带的组件已经没办法满足我们的使用了。这里推荐一个相册插件：vue-photo-preview。
安装：
cnpm install vue-photo-preview -S -d Nach dem Login kopieren 添加main.js中
//加载图片查看工具
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
var options={
fullscreenEl:false //关闭全屏按钮
}
Vue.use(preview,options)Nach dem Login kopieren 使用方法非常简单，只要再img中添加两个属性即可。
//在img标签添加preview属性 preview值相同即表示为同一组
<img src="xxx.jpg" preview="0" preview-text="描述文字">
//分组
<img src="xxx.jpg" preview="1" preview-text="描述文字"><img src="xxx.jpg" preview="1" preview-text="描述文字"><img src="xxx.jpg" preview="2" preview-text="描述文字"><img src="xxx.jpg" preview="2" preview-text="描述文字"> Nach dem Login kopieren 安全性
传输加密：sha256、md5、base64
前端进行she256，md5和base64非常的简单，只需要下载一套算法即可：
cnpm install js-md5 -S -d
cnpm install js-sha256 -S -d
cnpm install js-base64 -S -d Nach dem Login kopieren 然后把下载好的算法全部定义到vue到prototype上：
//3种加密方式
import md5 from 'js-md5';
Vue.prototype.$md5 = md5;
import sha256 from 'js-sha256';
Vue.prototype.$sha256 = sha256;
import base64 from 'js-base64';
Vue.prototype.$base64 = base64; Nach dem Login kopieren 使用方法：
console.log("md5加密方式："+this.$md5('holle'));
console.log("sha256加密方式："+this.$sha256('holle'));
console.log("base加密方式："+this.$sha256('holle'));Nach dem Login kopieren 交互数据模拟
mockjs
大部分时候，我们可能需要根据设计图做一个静态页面，因为我们不知道好多地方填上数据以后是什么样子的。这个时候我们肯定不能等着后端开发人员的接口开发完了再去填数据，这样效率太低了。
这里推荐使用mockjs。mock是一个可以拦截http请求生成一个微数据短的插件，让我们不用等着后端人员就可以自己先填入一部分数据。
使用cnpm命令安装，可以加快安装速度。
cnpm install mockjs --save-dev Nach dem Login kopieren 使用上是非常方便的，因为mock会自动拦截http请求。
首先，我们再src中创建一个mock文件夹，并且再里面创建index.js：
//引入mockjs
const Mock = require('mockjs')
//响应模拟数据
Mock.mock('http://api.com', {
"user|5-100": [{
'name': '@cname', //中文名称
'age|1-100': 100, //100以内随机整数
'birthday': '@date("yyyy-MM-dd")', //日期
'city': '@city(true)' //中国城市
}]
});Nach dem Login kopieren 你可以理解这个mock就是你的数据端，这里面配置的url，就是你获取虚拟数据要使用到的url。
然后打开main.js把这个js给引用上。
require('./mock/index')Nach dem Login kopieren 最后我们再组件中请求这个地址即可获得数据：
//mock
this.axios({
method: 'get',
url: 'http://api.com'
}).then(function(response) {
console.log(response);
})Nach dem Login kopieren 动态标题
vue-meta-info
spa有一个非常大的问题就是，它实际上没有那么多页面，我们所有的页面逻辑关系都是通过route完成的。
可是，这样就诞生了一个问题，页面的title部分并没有切换掉。我们就需要动态的去处理这个titile了。这里推荐使用vue-meta-info来解决这个问题，说实话，我曾经一度认为这个东西是一个核心组件。因为你的title不切换的话，总感觉好像少点什么一样。
安装：
cnpm i vue-meta-info -S -d Nach dem Login kopieren main.js中
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo) Nach dem Login kopieren 使用方法
metaInfo: {
title: '生活随记—党云龙个人博客',
meta: [{
name: '党云龙个人博客',
content: '党云龙,web前端开发,vue,vuecli,webpack,canvas,html5,css3'
}]
}Nach dem Login kopieren 优化篇
图片懒加载 vue-lazyload
vue-lazyload的作用就是：当你滚动条还没有滚动到这一片区域的时候，就不加载一片区域中的图片，会用loading中的gif图去代替。
使用npm安装方式：
npm install vue-lazyload --save Nach dem Login kopieren 然后在main.js中加入
//图片懒加载 ----------------------------------------
import VueLazyload from 'vue-lazyload';
//初始化
Vue.use(VueLazyload, {
preLoad: 1.3,
//loading: ‘../static/loading.gif',
loading: require('./assets/loading.gif'),
attempt: 1
})Nach dem Login kopieren 注意，loading的图片在static和assets中路径的写法稍微有点区别。
上传图片压缩 lrz
在图片上传的时候，我们肯定不能直接把一张大图给传上去，这里我们需要限制一下大小。然后，可能更好的方法就是，进行压缩。
这里推荐使用lrz插件。
安装：
cnpm install lrz -S -d Nach dem Login kopieren 然后再main中加载lrz:
import lrz from 'lrz' Nach dem Login kopieren 使用的时候:
<template>
<p>
<p @click.stop="addPic" ref="upload" class="btn">
<input type="file" accept="image/*" @change="onFileChange" style="display: none" multiple />chooseImg
</p>
<p v-if="!isNaN(before)">压缩前:{{before|number}}kb</p>
<p v-if="!isNaN(after)">压缩后:{{after|number}}kb</p>
</p>
</template>Nach dem Login kopieren import lrz from "lrz";
export default {
data() {
return {
imgUrl: [],
before: NaN,
after: NaN
};
},
methods: {
onFileChange(e) {
// 获取文件对象
var file = e.target.files[0];
// 压缩前文件大小
this.before = file.size / 1024;
this.imgUrl = URL.createObjectURL(file, { quality: 0 });
lrz(this.imgUrl).then(rst => {
// 压缩后文件大小
this.after = rst.fileLen / 1024;
});
}
}
}Nach dem Login kopieren |
Das obige ist der detaillierte Inhalt vonWas sind die gemeinsamen Komponenten von Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
