开发流程

选择手动模式

 安装vue扩展

 一路回车就行

路由模式

 每个配置都用单文件设置

vant组件库

网址:

Vant - Mobile UI Components built on Vue

  • 安装vant库

npm i vant -S

  • 自动按需引入组件 (推荐)

npm i babel-plugin-import -D

在项目根目录下面有一个babel.config.js文件,在此文件中进行如下操作

修改babel.config.js文件后,一定要重启vue项目

1. 这是按需css

2. 按需导入组件

 先改index.html

配置@

Vue @占位符的代码提示_tby_pr的博客-CSDN博客

改app.vue

配置 路由模块化 处理

 3. 在 route 下的 index.js 里写 【自动化导入路由】

webpack提供一个api方法,完成对于模块的自动加载
通过执行require.context函数,
主要用来实现自动化导入模块,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块
参数1:要去检索的目录
参数2:是否递归检索,true是,false否
参数3:指定要检索的文件类型  用正则来完成
返回值:是一个函数,且此函数有一个方法为keys返回一个检索到的文件列表(数组)
正则的 i不区分大小写 g全局 u支持中文

改成

const routes = []
const files = require.context('./routes', false, /\.js$/i)
files.keys().forEach(item => {
  let module = files(item).default
  Array.isArray(module) ? routes.push(...module) : routes.push(module)
});

 再改成(工作常用)

const files = require.context('./routes', false, /\.js$/i)
//pre初始值, cur当前值
const routes = files.keys().reduce((pre, cur) => {
  let module = files(cur).default
  Array.isArray(module) ? pre.push(...module) : pre.push(module)
  return pre
}, []);

 

 4. Rem 布局适配

postcss-pxtorem 是一款 PostCSS 插件,用于将 px 单位转化为 rem 单位

amfe-flexible 帮你去设置 html中的font-size值

npm i -D postcss-pxtorem@5

npm i -S amfe-flexible

在main.js中引入amfe-flexible类库

照着vant进阶用法的Rem 布局适配里的要求配置:

在项目根目录下面创建一个postcss.config.js文件

// 修改此文件一定要重启vue项目
module.exports = {
  plugins: {
    // px自动转为rem插件  需要安装,一定要注意和vue2.x版本兼容  我们用的是5版本
    'postcss-pxtorem': {
      // 基准值(iPhone6为准),一般为750,二倍图(375*667)    1rem = 37.5px
      rootValue: 37.5,
      // 所有写在class类样式中的尺寸单位的属性中的px都会帮你转换为rem
      // style中的px不会转换  所以建议少用style
      propList: ['*'],
    },
  },
};

5. 网络请求

npm i -S axios

 5-1. 在 src 下新建 utils 文件夹,在下面 封装 给api建一个基类(基础方法),所有的api里的网络请求全部引用这个基类

  5-1-2. 网站环境配置

 

5-2. 在 src 下新建 api 文件夹,在下面 封装 各个文件的网络请求

 5-3. 调用请求

 

 6. 反向代理 / 解决跨域

配置参考 | Vue CLI

看官网devServer.proxy模块的配置要求 

 在项目根目录下面创建一个 vue.config.js 文件,写下如下代码

// 它是vue-cli给开发者暴露出来修改webpack配置的文件 
// 此文件是运行在nodejs中,所以它的模块化为 commonjs
// 此文件修改后一定要进行项目重启
// 此文件中的代理配置中适合于开发环境,生产需要自己手动通过nodejs完成

module.exports = {

  // 它就是一个expres框架
  devServer: {
    // 如果vue开发环境服务器来完成数据请求代理,代理可以写N多个
    // 匹配的规则为 express.use 模糊匹配,所以匹配的请求前缀尽量不一样
    proxy: {
      // 什么样的前缀我才匹配进行代理
      // 注:请求地址中一定不要带协议(http/https)
      // 请求url地址以/api开头的我进行匹配
      '/api': {
        // 代理访问的目标服务器
        target: 'https://api.iynn.cn/film',
        // 设置请求代理模式的来源host主机名
        chanageOrigin: true,
        // 路径重写
        pathRewrite: {
          // 把请求地址中的/wuchen 重写为''
          // '^/wuchen': ''
        }
      },
      '/ajax': {
        target: 'https://m.maizuo.com',
        chanageOrigin: true,
        pathRewrite: {
          '^/ajax': ''
        }
      }
    }
  }
}


swipe轮播(轮播图)

 

看要请求的网页的数据的响应 是否允许跨域!!!

 

 结果出现404    => 看请求头是否缺数据

 返回的数据太乱不合心意,做一些处理

 数据父传子

 

 子渲染数据


Tab 标签页(正在热映/即将上映)

 

粘性吸顶

因为tab是当做导航使用,所以ui库自带的粘性吸顶用不了,需要自己手写。

<template>
    <div>
        <FilmListTopNav :class="fixed ? 'fixed' : ''" />
        <router-view></router-view>
    </div>
</template>

<script>
import FilmListTopNav from "@/components/FilmListTopNav";
export default {
    data() {
        return {
            // 默认不吸顶
            fixed: false,
        };
    },
    components: {
        FilmListTopNav,
    },
    mounted() {
        window.addEventListener(
            "scroll",
            (e) => {
                let top = document.documentElement.scrollTop;
                if (top > 150) {
                    // 吸顶
                    this.fixed = true;
                } else {
                    // 还原
                    this.fixed = false;
                }
            },
            true
        );
    },
};
</script>

<style lang="scss" scoped>
.fixed {
    position: fixed;
    top: 0;
    width=100px;
}
</style>

 滚动条事件优化 可以用 lodash节流

npm i -S lodash

Lodash 简介 | Lodash 中文文档 | Lodash 中文网


 ui库改样式要用【样式穿透】!!!

::v-deep 样式名{}

 scoped是样式作用域,不推荐去掉


List列表(电影列表)

 又想改结构又要改数据 => 用【插槽】

 

item.vue 文件就是每一个列表项的组件

 


解决每次切换路由(切换正在热映/即将上映)时重复的网络请求

keep-alive


刷新就变成正在热映,应该是在哪刷新回到哪里


Tabbar标签栏(底部导航)

写在app.vue里,拆出去

当底部导航盖住 列表的内容,将内容margin-bottom:底部导航的高度px;


Tabbar标签栏(底部导航)刷新无高亮bug

 startWith方法,es6


图片懒加载 

 将 v-lazy 指令的值设置为你需要懒加载的图片。

<img v-lazy="img" />

Toast轻提示(请求超时提示用户)

当网络不好时,请求不回来东西或请求超时,要有弹框去提示用户。

Vant - Mobile UI Components built on Vue

import { Toast } from 'vant';

Toast.fail('失败文案');


Vue中错误处理 => 日志

全局错误统一处理(一般可以在此记录,项目中的问题,然后不着急的时候来处理)

组件一定要起 唯一的名字!!!

API — Vue.js

在 main.js中 通过设置全局的统一的错误处理,来完成错误的收集,从而方便我们日后BUG的修复

Vue.config.errorHandler = function (err, vm, info) {
  console.log(err, vm, info)
}

(电影详情页)

路由传参=>props:true

接收路由隐式传递传过来的数据


元素/组件的 过渡动画

Vue 提供了 transition 的封装组件

进入/离开 & 列表过渡 — Vue.js

过渡动效 | Vue Router

name就是样式的前缀名=>wuchen替换fade 

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

 Animate.css,动画库

Animate.css | A cross-browser library of CSS animations.

路由过度切换


电影详情页底部菜单隐藏

app是new Vue的唯一的孩子,Vue是个类.

 方案1:导航守卫(常用,但是应该配合Vuex,而不是watch)

 

 方案2:事件总线 eventBus(几乎不用)

因为:第一,不能存储数据。第二,谁都可以发指令,只要接收指令一监听我就改,容易数据紊乱。

 

 

事件总线和导航守卫的区别是进入组件后底部菜单才消失,因为只有导航守卫才能比组件创建更早一些。


电影详情页

导航返回

 人员滚动展示 样式,盖住滚动条


影院

NavBar(顶部导航)

 点击跳转搜索页面

配置路由、配置vue文件、配置网络请求

List列表=>下拉刷新(影院列表)


同组件用$nextTick,不同组件用key(用请求回的数据的length),会销毁再创建


 better-scroll(列表滚动加载数据插件

BetterScroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。

better-scroll:介绍 | BetterScroll 2.0

npm i -S better-scroll


Skeleton骨架屏


城市列表开发

IndexBar索引栏


个人中心

登录


请求数据渲染延迟

mounted(){

        this.onload()

}


登录接口

node 对称加密

 

 

 

 

 

token一致,来源地不一致,数据请求不了.

 

 

 

 

 表单 按钮 就要做防抖!!!

 

 

 hooks是对象

 

 

 函数柯里化 : 函数体不会被执行,所以要让()里的代码成为一个函数体

startWhith 字符串以什么为前缀的方法

 

Logo

前往低代码交流专区

更多推荐