Vue의 공통 구성 요소는 무엇입니까?
- 藏色散人원래의
- 2021-09-03 11:27:2721578검색
vue의 일반적인 구성 요소는 다음과 같습니다: 1. vue-route; 3. vuex; 5. swiper; 7. vue-video-player; - 미리보기 등등.
이 기사의 운영 환경: windows7 시스템, vue 버전 2.5.17, DELL G3 컴퓨터.
vue의 공통 구성요소는 무엇인가요?
vue—마스터해야 하는 공통 구성 요소(업데이트 중)
이 기사를 읽을 때 참고할 사항
이 기사의 모든 구성 요소 예제는 vuecli2를 기반으로 합니다. 이러한 구성 요소의 대부분은 vue.use() 메서드를 사용합니다.
vue.use()를 사용하는 이유에 대한 설명은 다음과 같습니다. 플러그인이 메소드인 경우
이를 사용하려면 vue 프로토타입에 메소드만 정의하면 됩니다.
import axios from 'axios' Vue.prototype.axios = axios
하지만 플러그인이 객체인 경우 vue.use를 통해 객체를 소개해야 합니다. () ：
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router)
좋아, 그럼 Vue Family Bucket의 핵심 구성 요소부터 시작해 보겠습니다.
핵심 구성 요소
Routing: vue-route
Long 형제는 vue를 배울 때 경로 단계에 도달했을 때 포기한 친구들이 많습니다. 경로를 설명하는 것은 매우 어렵기 때문에 경로의 존재는 우리가 수행하는 작업이 많은 정적 HTML 페이지가 아니라 SPA 단일 페이지 애플리케이션임을 증명합니다.
그럼 루트란 정확히 무엇인가요? 서버를 남겨두자. 즉, 반응성이 무엇인지 알 수 있습니다. 반응형 레이아웃, 미디어를 통해 상대방의 휴대폰 모델과 화면 해상도를 쿼리하고 이에 대한 디스플레이 스타일을 전환합니다.
route URL의 "미디어 쿼리"라고 이해하시면 됩니다. URL에 다른 경로를 입력하면 다른 Vue 페이지에 응답할 수 있습니다.
먼저 vuecli에서 main.js 파일을 열면 여기에 라우트가 소개되어 있고 vue로 구성되어 있는 것을 확인할 수 있습니다.
//第一步引入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/>',
})
우리는 리드를 따라가서 이 경로의 index.js 구성 파일을 찾았고, URL에 액세스하도록 모두 구성되어 있음을 확인할 수 있습니다.
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
}]
})
번거롭다면 이 경로에서 경로 섹션을 몇 개 더 직접 복사한 다음 경로를 자신의 경로로 변경할 수 있습니다.
여기서 경로에는 하위 라우팅 및 경로 분할 기능도 포함된다는 점에 유의해야 합니다. 여기서는 너무 자세히 설명하지 않겠습니다. 이는 단지 소개에 불과합니다.
비동기 데이터 요청: axios
jquery에서 이 메서드를 기억하시나요?
$.ajax()
실제로는 자바스크립트의 기본 Ajax 메서드에 대한 래퍼입니다.
axios는 동일하지만 vue에서 작동합니다. 도입 방식이 Route와 다릅니다. 단지 메소드 집합이기 때문에 vue 프로토타입에서 직접 정의할 수 있습니다.
먼저 npm을 통해 설치합니다:
npm install axios -s-d
그런 다음 main.js를 엽니다:
import axios from 'axios' Vue.prototype.axios = axios
호출할 때 메소드나 마운트 등 라이프 사이클에 작성할 수 있습니다.
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
})
또한 패키징 시 axios를 사용하여 온라인 환경과 오프라인 환경을 구분할 수도 있습니다
//配置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
}
vuex 상태 관리
npm을 사용하여 먼저 설치하세요:
npm i vuex --save
vuex를 사용할 때 src 디렉터리에 있어야 합니다. 새 저장소 폴더를 만들고 그 안에 상태 트리 js를 만듭니다.
그리고 main.js에 소개합니다
//加载vue store
import store from './store'
new Vue({
el: '#app',
render: h => h(App),
router,
store,
components: {
App
},
template: '<App/>'
})
여기에서 vuex가 store 기반이라는 것을 쉽게 알 수 있습니다. 게다가 vuex는 여전히 단일 상태 트리입니다. 그렇다면 매장 상태 트리를 구성하는 방법은 무엇입니까?
스토어에서 이 index.js를 엽니다
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
}
});
스토어가 실제로 기능하기 위해 주로 다음 5가지 매개변수에 의존한다는 것을 알 수 있습니다.
| vuex의 계산된 속성과 동일하며 주로 값을 계산하고 처리하는 데 사용됩니다. | |
|---|---|
| actions | |
| modules | |
|
子状态树的写法也完全一样： const model1 = {
state: {
name: "longge",
age:31
},
getters:{
},
mutations: {
},
actions:{
}
};
export default model1;
混入其中的高手冷门知识vuex有一个鲜为人知的辅助方法：mapState computed:mapState({
ageadd (state) {
return state.count + this.localCount
}
}),
有很多同学不知道这个函数是干啥用的，龙哥用最简单的方法来介绍一下，这里涉及到了computed这个比较常用的vue属性，这个东西就是前面提到的计算属性，它主要是在不改变原始值的情况下对值做一些处理。 如果，你一个一个通过 this.$store.state.xx 的当时去调用store的值放到这个计算属性里面，你不是老得写这个this.$store吗。于是vuex官方就提供了一个让你可以省略前面这一段的方法。你可以通过这个方式一次获得所有store中的state中的数据，然后传入state直接用就行了。 这里面还有一个混入写法...mapState。各位观众老爷请到龙哥vuex详细教程中找一下，这里就不过多介绍了。 UI库Element UI依然使用npm进行安装，当然如果你有cnpm就更好了： cnpm install element-ui -s-d 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); 调用的时候也非常简单： <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> 直接把这种el开头的标签插入到你的.vue文件中即可。 element支持的组件非常多，你可以查看这里，里面的组件代码已经写的非常清楚了，直接复制粘贴到你的.vue中即可。 焦点图 / 轮播图swiper你可能会问了，轮播图组件多了去了，为什么就介绍swiper呢？因为龙哥过去在制作非spa页面的时候，对swiper可以说是情有独钟，无论是兼容性还是在移动/非移动端，swiper的表现都可圈可点。官方提供完整的api手册，让扩展修改也非常得心应手。 使用cnpm安装 cnpm install swiper -S -d 安装完毕以后，我们需要把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>
因为是局部的，我们甚至都不需要再main中去引入它。用的时候直接定义到components上即可。 components: {
swiper
},
然后把标签写到你的项目中： <swiper></swiper> 图表vue-echartsvue-echarts是echarts的一个封装，它和百度echarts的区别在于，它是基于vue的一个对象..操作上更加的简单，如果你仅仅是为了展示图表，建议你使用vue-echarts。但是如果你的项目中含有对echarts的深度定制，例如改变了原始图表的展示方式或者点击事件和较为复杂的逻辑，还是建议你使用百度echarts。 安装方式跟其他vue组件一样： npm install echarts vue-echarts 然后打开main.js输入 import ECharts from 'vue-echarts';
import 'echarts/lib/chart/line';
Vue.component('chart', ECharts);
这样vue-echarts就变成了一个全局组件，我们直接在页面中调用即可。 <chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart> 另外在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
}]
}
},
}
其中具体图表设置请查看这里。 视频播放vue-video-playervue-video-player是一个视频播放解决方案，功能非常全。 使用cnpm命令安装，可以加快安装速度。 cnpm install vue-video-player -S -d 然后老规矩打开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)
然后在我们要使用的页面上： <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" ></video-player> 最后增加一个配置变量： 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 //全屏按钮
}
}
每次要切换视频的时候，修改src即可。 相册vue-photo-preview有的时候，我们会遇到一个需求，就是把小图放大或者多个图片方大后轮播的情况，这个时候用element ui中自带的组件已经没办法满足我们的使用了。这里推荐一个相册插件：vue-photo-preview。 安装： cnpm install vue-photo-preview -S -d 添加main.js中 //加载图片查看工具
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
var options={
fullscreenEl:false //关闭全屏按钮
}
Vue.use(preview,options)
使用方法非常简单，只要再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="描述文字"> 安全性传输加密：sha256、md5、base64前端进行she256，md5和base64非常的简单，只需要下载一套算法即可： cnpm install js-md5 -S -d cnpm install js-sha256 -S -d cnpm install js-base64 -S -d 然后把下载好的算法全部定义到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; 使用方法： console.log("md5加密方式："+this.$md5('holle'));
console.log("sha256加密方式："+this.$sha256('holle'));
console.log("base加密方式："+this.$sha256('holle'));
交互数据模拟mockjs大部分时候，我们可能需要根据设计图做一个静态页面，因为我们不知道好多地方填上数据以后是什么样子的。这个时候我们肯定不能等着后端开发人员的接口开发完了再去填数据，这样效率太低了。 这里推荐使用mockjs。mock是一个可以拦截http请求生成一个微数据短的插件，让我们不用等着后端人员就可以自己先填入一部分数据。 使用cnpm命令安装，可以加快安装速度。 cnpm install mockjs --save-dev 使用上是非常方便的，因为mock会自动拦截http请求。 //引入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)' //中国城市
}]
});
你可以理解这个mock就是你的数据端，这里面配置的url，就是你获取虚拟数据要使用到的url。 然后打开main.js把这个js给引用上。 require('./mock/index')
最后我们再组件中请求这个地址即可获得数据： //mock
this.axios({
method: 'get',
url: 'http://api.com'
}).then(function(response) {
console.log(response);
})
动态标题vue-meta-infospa有一个非常大的问题就是，它实际上没有那么多页面，我们所有的页面逻辑关系都是通过route完成的。 可是，这样就诞生了一个问题，页面的title部分并没有切换掉。我们就需要动态的去处理这个titile了。这里推荐使用vue-meta-info来解决这个问题，说实话，我曾经一度认为这个东西是一个核心组件。因为你的title不切换的话，总感觉好像少点什么一样。 安装： cnpm i vue-meta-info -S -d main.js中 import MetaInfo from 'vue-meta-info' Vue.use(MetaInfo) 使用方法 metaInfo: {
title: '生活随记—党云龙个人博客',
meta: [{
name: '党云龙个人博客',
content: '党云龙,web前端开发,vue,vuecli,webpack,canvas,html5,css3'
}]
}
优化篇图片懒加载 vue-lazyloadvue-lazyload的作用就是：当你滚动条还没有滚动到这一片区域的时候，就不加载一片区域中的图片，会用loading中的gif图去代替。 使用npm安装方式： npm install vue-lazyload --save 然后在main.js中加入 //图片懒加载 ----------------------------------------
import VueLazyload from 'vue-lazyload';
//初始化
Vue.use(VueLazyload, {
preLoad: 1.3,
//loading: ‘../static/loading.gif',
loading: require('./assets/loading.gif'),
attempt: 1
})
注意，loading的图片在static和assets中路径的写法稍微有点区别。 上传图片压缩 lrz在图片上传的时候，我们肯定不能直接把一张大图给传上去，这里我们需要限制一下大小。然后，可能更好的方法就是，进行压缩。 cnpm install lrz -S -d 然后再main中加载lrz: import lrz from 'lrz' 使用的时候: <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>
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;
});
}
}
}
|
위 내용은 Vue의 공통 구성 요소는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!