clshong / vue-epidemic Goto Github PK

移动端的疫情数据信息介绍

1. 组件拆分
2. 网络请求 axios
3. vue 中使用 echarts 图表
4. Vue 中封装的 tabs 组件-自定义封装组件
5. Vue 中使用 swiper
6. Vue 中使用 vant 库

1. 创建项目 vue create vue-yiqing
2. 安装：npm i axios vant -S
3. 删除无用的组件
4. css 初始化
5. 移动端适配方案：
   1. phone.js 引入 main.js / 媒体查询设置 各各屏幕的 css
   2. vw 布局 100vw=750px
6. 配置一个公共的接口文档

1. 处理接口地址
2. http://api.tianapi.com/ncov/index?key=b5919dd6f573907e378d0a6be7a78ff3

1. 安装：npm i vant -S

2. 自动按需引入组件 (推荐):npm i babel-plugin-import -D

3. 对于使用 babel7 的用户，可以在 babel.config.js 中配置 module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ] };

4. 创建一个 vant.js 插件使用 vant.js

5. main.js 引入 vant 库 import './plugins/vant'

1. 安装 echarts: npm i [email protected] -S

2. 使用方式

   1. 方式 1：组件内部使用单独使用

      1. 导入：import echarts from 'echarts'
      2. 直接使用

   2. 方式 2：挂载到 vue 原型上 所有组件都可以使用

      1. 导入：import echarts from 'echarts'
      2. main.js 挂载：Vue.prototype.$echarts = echarts

   3. 方式 3：开发成 vue 插件 echarts

      1. 创建 js 文件：const install = function (Vue, options) {}
      2. 导入 main.js //使用开发的插件 import echarts from './plugins/echarts' Vue.use(echarts)

1. 创建一个城市界面
2. 配置动态路由 接受城市名称：city

1. 安装: npm i md5-js -S

2. 引入 md5 模块
   import md5 from 'md5-js'

3. 使用加密处理 let sign =md5('加密规则')

4. 规则：md5('appid6938city_name 北京 formatjson 秘钥')

1. 参考网址：https://github.com/surmon-china/vue-awesome-swiper

2. 使用步骤：

   1. 安装： npm install [email protected] [email protected] --save

   2. main.js 导入文件 import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/css/swiper.css' Vue.use(VueAwesomeSwiper)

   3. 组件使用

      Slide 1 Slide 2 Slide 3 Slide 4 Slide 5

   4. 参数配置

      <script>
      export default {
          name: 'carrousel',
          data() {
          return {
              swiperOptions: {
              pagination: {
                  el: '.swiper-pagination'
              },
              // Some Swiper option/callback...
              }
          }
          },
          computed: {
          swiper() {
              return this.$refs.mySwiper.$swiper
          }
          },
          mounted() {
          console.log('Current Swiper instance object', this.swiper)
          this.swiper.slideTo(3, 1000, false)
          }
      }
      </script>
      

接口来源（聚合数据）：https://www.juhe.cn/docs/api/id/566

注册流程： 注册后 实名认证 需要等待一两分钟，刷新页面 ，认证成功 请求示例：http://apis.juhe.cn/springTravel/citys?key=keyid 参数 ： key ，获取位置 ： 右上角个人中心—数据中心—我的 api

接口：key

1. key=171e165a7d991c5f6ecd5194c54778ef
2. key=6abf107dc48af5c2745ae63e8c125342
3. key=25309d1d363848790921460a73866c0c
4. key=ea3295121216b176e1a6b8af7fcd3dcf
5. key=674d6ec65afc51339176339dc899e16e
6. key=f3e50a7c0bce34a492c291db993d0c04

1. 父传子： prop 传递数据 子传父：自定义事件
2. 父组件实例：$parent
3. 子组件实例：$chldren
4. 兄弟元素：子组件数据给父组件---另外的子组件
5. dom 元素和子组件实例：$refs
6. 获取根组件：$root
7. 深层传递：provide / inject
8. 原型链数据： Vue.prototype.xx =xx
9. 本地存储：localStorage.setItem()/getItem()
10. eventBus **系统 - 跨组件之间传递数据
11. $attrs 和 $listeners
12. Vuex

1. 定义 eventBus.js

2. 创建 eventbus import Vue from 'vue' var Bus=new Vue();

   export default Bus

3. main.js 引入文件： import Bus from './utils/eventBus.js'     Vue.prototype.$bus=Bus

4. 使用语法： 传递数据：        this.$bus.$emit("sun", "哈哈哈");

接受数据：             this.$bus.$on("sun",val=>{                     val               });      解绑事件：   this.$bus.$off("sun");

缺点：不支持响应式  维护的“灾难”