IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Vue中常见的配置 -> 正文阅读

[JavaScript知识库]Vue中常见的配置

一.配置vue中文件夹的别名。

1.创建一个vue.config.js文件。

?2.配置vue.config.js中的参数

module.exports = {
  publicPath: '/',    // 启动页地址
  outputDir: 'dist', // 打包的目录
  lintOnSave: true, // 在保存时校验格式
  productionSourceMap: false, // 生产环境是否生成 SourceMap
  devServer: {
      open: true, // 启动服务后是否打开浏览器
      host: '0.0.0.0',
      port: 8080, // 服务端口
      https: false,
      hotOnly: false,
      proxy: null, // 设置代理
      before: app => { }
  },
  // 下面是配置别名的代码段
  configureWebpack:{
    resolve:{
      alias:{
        //这里的@是脚手架默认定义的表示src的目录
        views:'@/views',
        assets:'@/assets',
        components:'@/components'
      }
    }
  },
}

3.在组件引入时可以直接使用别名,如下:

?二.Vue中配置懒加载步骤

1, 安装图片懒加载模块
?? ?npm install vue-lazyload --save
2, 在main.js入口文件中引入图片懒加载模块

// 导入图片懒加载模块
import VueLazy from 'vue-lazyload'
// 设置懒加载的占位图
Vue.use(VueLazy,{
  loading:require("@/assets/logo.png")
})

3, 组件中显示图片时,使用懒加载, 将图片的:src改为v-lazy即可
?? ?<img v-lazy="roomData.room_src" alt="">

<template>
  <div>
    <h1>斗鱼直播</h1>
    <ul>
      <li v-for='item in list' :key = "item.rid">
        <img v-lazy="item.roomSrc">
      </li>
    </ul>
  </div>
</template>

<script>
// 局部导入axios ,只能在此组件中使用
// import axios from 'axios'
export default {
  name:'DouYu',
  data() {
    return {
      list:[]
    }
  },
  created() {
    // 1.es6原生ajax
    // fetch('/myDouyu?page=1').then(res=>{
    //   return res.json()
    // }).then(res=>{
    //   this.list = res.data.list
    //   console.log(this.list);
    // })
    //2.axios局部用法
    // axios.get('/myDouyu',{
    //   page:1
    // }).then(res=>{
    //   this.list = res.data.data.list
    // })
   
    // 3.全局用法
this.$axios.get('/myDouyu',{
      page:1
    }).then(res=>{
      this.list = res.data.data.list
    })
  },
}
</script>

<style>

</style>

三.vue中使用axios发起网络请求数据

1.在vue项目中下载axios模块
??? npm i axios --save

(1)局部使用

? 1.局部使用在某一个组件中导入axios
????? import axios from 'axios'

? 2.在当前组件的函数发起数据请求

axios.get('/myDouyu',{
      page:1
    }).then(res=>{
      this.list = res.data.data.list
    })

?(2)全局使用

?? 1.在main.js中导入axios并设置到原型上

// 导入axios插件
import axios from 'axios'
// 把axios添加到原型上,每一个组件都是vue对象,原型上属性每一个对象都能调用
Vue.prototype.$axios = axios

? 2.配置后在vue中的任意一个组件中使用如下写法

    // 3.全局用法
this.$axios.get('/myDouyu',{
      page:1
    }).then(res=>{
      this.list = res.data.data.list
    })
  },

?三.如何在一个vue组件文件中使用js文件中导出的数据

1.在js文件中将需要的数据导出

2.在任意一个组件中导入并使用

四.vuex资源状态管理器的配置及使用。

方法一:脚手架创建项目时,选择vuex即可。

方法二:在项目写一半时,手动添加。如下所示:

1.下载安装vuex模块

?? npm i vuex --save

2.在/src目录下新建文件? /src/store/index.js? 导入vuex

??? import Vue from 'vue'
?? ?import Vuex from 'vuex'
?? ?Vue.use(Vuex)

3.在/src/store/index.js中创建管理仓库,并导出

export default new Vuex.Store({
? ?? ??? ?state: {},
??? ??? ? mutations: {}
?? ?})

4, 在main.js中导入store/index.js状态管理仓库, 帮把它添加到vue根组件中
?? ?import store from './store'
?? ?new Vue({router, store})
5, 在组件中使用状态数据
?? ?// 从vuex中按需导入状态数据的映射函数mapState
? ?? ?import { mapState } from 'vuex'
?? ?// 使用映射函数把状态数据state映射到计算属性中
?? ??? ?computed: {
???? ??? ?...mapState(["isLogin"])
?? ??? ?}
?? ?<!-- state在映射到计算属性中之后,当作计算属性来用 -->
?? ??? ?登录状态: {{isLogin}}


6, 在组件中修改状态数据

?? ?this.$store.commit("setLogin", true)

7.vuex中的其他参数及作用

import Vue from 'vue'
import Vuex from 'vuex'
// var flag = false;
var timer;
Vue.use(Vuex)
// 创建vuex状态管理仓库并导出
var store = new Vuex.Store({
  // state状态管理对象,里面放全局状态数据
  state: {
    count: 100
  },
  //mutations中定义修改state数据的函数  
  mutations: {
    // 更新count数据的函数,
    setCount(state, value) {
      state.count = value;
      // 状态仓库数据更新时,本地数据要同步更新
      sessionStorage.setItem('count', state.count)
    }
  },
  // 基本数据的派生数据,类似于计算属性,可以对基本状态数据加工处理并返回新数据 
  getters: {
    dblCount(state) {
      return state.count * 2
    }
  },
  // actions是一个装饰器,包裹mutations,使之异步
  actions: {
    change(store) {
      // 节流方式1
      if(timer) clearInterval(timer)
      // 节流方式2
      // if (flag) {
      //   return
      // } else {
        // 定时器异步操作
        timer = setInterval(() => {
          store.commit('setCount', this.state.count + 1)
         // flag = true
        }, 1000)
      // }


    }
  },
  //仓库模块化,可以把状态数据拆分来
  // modules:[
  //   {
  //     state:{},
  //     mutations:{}
  //   },
  //   {
  //     state:{},
  //     mutations:{}
  //   }
  // ]
})
// 注意:状态管理一般要结合本地存储来用,保证页面刷新时,状态数据不重置

// 初始化时,从本地取出状态数据,重新赋值
var count = sessionStorage.getItem('count')
if (count) {
  store.commit('setCount', count * 1)
}
export default store;

组件中的使用:

<template>
  <div>
    <h1>斗鱼直播,状态管理值{{count}}----{{dblCount}}</h1>
    <button @click='add'> 斗鱼状态数据+++</button>
    <ul>
      <li v-for='item in list' :key = "item.rid">
        <img v-lazy="item.roomSrc">
      </li>
      
    </ul>
  </div>
</template>

<script>
// 局部导入axios ,只能在此组件中使用
// import axios from 'axios'

// 从vuex中按需导入状态数据的映射函数mapState
// 映射函数:把状态仓库的数据映射为当前组件的响应式数据
import {mapState, mapGetters, mapActions} from 'vuex'
export default {
  name:'DouYu',
  data() {
    return {
      list:[]
    }
  },
  // computed:mapState(['count']),//可以这样写,但不建议,因为不能写自定义属性
  // 使用映射函数将状态数据state映射到计算属性中
  computed:{
    ...mapState(['count']),
    ...mapGetters(['dblCount'])
    // 下面可以添加自定义的计算属性
  },
  methods: {
    // actions中的函数要映射到methods中
    ...mapActions(['change']),
    add(){
      // 更新状态仓库中的count,(计算属性只读,不能改)
      // this.$store指的是根组件中的store,commit函数会调用仓库中mutation字段中的更新函数
      this.$store.commit("setCount",this.count + 1)
    }
  },
  created() {
    // 斗鱼页显示时调用状态仓库中的change函数,实现count自动更新
    this.change()
    // 以下请求都用的代理服务器请求,为了实现跨域,配置代理服务器,参考本文的vue.config.js中的配置
    // 1.es6原生ajax
    // fetch('/myDouyu?page=1').then(res=>{
    //   return res.json()
    // }).then(res=>{
    //   this.list = res.data.list
    //   console.log(this.list);
    // })
    
    //2.axios局部用法
    // axios.get('/myDouyu',{
    //   page:1
    // }).then(res=>{
    //   this.list = res.data.data.list
    // })
   
    // 3.全局用法
this.$axios.get('/myDouyu',{
      page:1
    }).then(res=>{
      this.list = res.data.data.list
    })
  },
}
</script>

<style>

</style>

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-10-28 12:18:13  更:2021-10-28 12:20:13 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 3:01:10-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码