当前位置： 首页 > news >正文

英文网站建设网站/金昌网站seo

news 2025/6/30 20:27:13
英文网站建设网站,金昌网站seo,外贸网站放在香港,wordpress 2017主题day-059-fifty-nine-20230427-移动端商城 移动端商城 vant2 看vant官网，发现vue2要用vant2，进入vant2官网。 vant官网-首页 vant官网-首页-版本提示 Vant 4.x版本 的文档，适用于Vue 3开发。 使用 Vue 2，请浏览Vant 2文档。 va…

day-059-fifty-nine-20230427-移动端商城

移动端商城

vant2

  • 看vant官网，发现vue2要用vant2，进入vant2官网。

    • vant官网-首页
      • vant官网-首页-版本提示

  • Vant 4.x版本 的文档，适用于Vue 3开发。

    • 使用 Vue 2，请浏览Vant 2文档。
      • vant官网-Vant2官网

安装vant2

  • 安装vant2插件
npm i vant@latest-v2

使用vant2组件

选一种使用

  • 方式一-自动按需引入组件 (推荐)

    1. 安装插件

      npm i babel-plugin-import -D

    2. 在/babel.config.js中添加

      module.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: [['import', {libraryName: 'vant',libraryDirectory: 'es',style: true}, 'vant']]
}

    3. 在/src/main.js中导入

        import 'vant/lib/index.css';import { Button } from 'vant';Vue.use(Button)

      1. 不过一般在/src/vant/index.js中统一配置，以统一处理并解耦关于vant的组件引入

        // 1. 引入vue；
import Vue from "vue";// 2. 引入vant的css样式
import "vant/lib/index.css";// 3. 引入button组件，在组件中使用时是用`van-button`使用
import { Button } from "vant";
Vue.use(Button);

      2. 在/src/main.js中引入/src/vant/index.js并让它运行一次

        import './vant/index.js'

  • 方式二-手动按需引入组件

    • 在不使用插件的情况下，可以手动引入需要的组件。

    • 在具体的某个组件内

      <template><div class="home"><van-button type="danger">使用van-button组件</van-button><h1>h1</h1><h3>h3</h3></div>
</template><script>
import 'vant/lib/button/style';//引入button的样式，使用这个的前提是安装了vant这个ui框架。
import Button from 'vant/lib/button';//引入button的js代码，使用这个的前提是安装了vant这个ui框架。
export default {name: "HomeView",components: {"van-button": Button,//要重命名引入的组件，最好是两个字母，中间用连接符分隔。},
};
</script>

  • 方式三-导入所有组件

    • Vant支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。

    • 在/src/main.js中导入

      //1. 全局导入
//import Vue from 'vue';//这个一般不用写，因为之前Vue脚手架已经导入了
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

vant2组件的注册方式

全局注册

  • 全局组件-要全局注册

    1. 在/src/main.js或/src/vant/index.js中导入对应的组件

      import Vue from 'vue';
import { Button } from 'vant';

    2. 全局注册组件

      1. 通过 Vue.use 注册

        // 方式一. 通过 Vue.use 注册
// 注册完成后，在模板中通过 <van-button> 或 <VanButton> 标签来使用按钮组件
Vue.use(Button);

      2. 通过 Vue.component 注册

        // 方式二. 通过 Vue.component 注册
// 注册完成后，在模板中通过 <van-button> 标签来使用按钮组件
Vue.component(Button.name, Button);
    • 全局注册后，在项目所有的vue文件中都可以直接在模板中使用
局部注册

  • 局部组件-要局部注册

    • 在具体的一个vue组件中调用

      <template><div class="home"><van-button type="primary">主要按钮</van-button><van-button type="info">信息按钮</van-button><van-button type="default">默认按钮</van-button><van-button type="warning">警告按钮</van-button><van-button type="danger">危险按钮</van-button><h1>h1</h1><h3>h3</h3></div>
</template><script>
import { Button } from 'vant';
export default {name: "HomeView",components: {"van-button": Button,//要重命名引入的组件，最好是两个字母，中间用连接符分隔。},
};
</script>

    • 局部注册后，你只可以在当前组件中使用注册的 Vant 组件。

  • 仅演示，一般项目不用这种方式，有点麻烦

    • 但如果要放博客或vue2与vue3兼容，这种方式比较清晰

作用域插槽

  • Vant 提供了丰富的组件插槽，通过插槽可以对组件的某一部分进行个性化定制。
<template><div><van-checkbox v-model="checked"><!-- 使用组件提供的 icon 插槽 --><!-- 将默认图标替换为个性化图片 --><template #icon="props"><img :src="props.checked ? 'https://img01.yzcdn.cn/vant/user-active.png' : 'https://img01.yzcdn.cn/vant/user-inactive.png'" /></template></van-checkbox></div>
</template><script>
export default {data() {return {checked: true,};},
};
</script>

浏览器适配

移动端适配

  • Viewport 布局

    • Vant 默认使用 px 作为样式单位，如果需要使用 viewport 单位 (vw, vh, vmin, vmax)，推荐使用 postcss-px-to-viewport 进行转换。
    • 步骤：

      1. 安装postcss插件和postcss-px-to-viewport插件

        //npm i postcss -D //vant默认已经安装了
npm i postcss-px-to-viewport -D

      2. /postcss.config.js

        module.exports = {plugins: {'postcss-px-to-viewport': {viewportWidth: 375,},},
};

  • Rem 布局适配

    • 根标签设置rem基准值，使用rem单位
    • px em rem 区别？
      • px是物理像素，em是相对父元素字体大小，rem是相对根元素字体大小。
    • 步骤

      1. 引入插件，用于在根标签设置rem基准值

        npm i -S amfe-flexible
yarn add amfe-flexible

      2. 要求在根元素中引入一个js文件–即amfe-flexible插件中生成的js文件

        • 生效版：在/src/main.js中导入

          import "../node_modules/amfe-flexible/index.js"

        • 官网推荐：在模块文件/public/index.html中使用

          <script src="./node_modules/amfe-flexible/index.js"></script>
          • 不过不生效，是因为路径出错了。没能引到amfe-flexible插件中生成的js文件
            • 应该要在vue-cli或webpack中配置好，或者script的标签写对路径

      3. 使用rem单位

        • 自己计算转化
        • 自动计算转化，通过postcss-pxtorem这个postcss插件
          • 在项目中可以直接写px,自动转化为rem,不需要进行计算了
          • 步骤：

            1. 安装postcss插件和postcss-pxtorem插件

              //npm i postcss -D //vant默认已经安装了
npm install postcss postcss-pxtorem@5.1.1 --save-dev//vue2的postcss-pxtorem要用@5.1.1，最新版不太支持。vue3可以使用最新版比较多。

            2. /postcss.config.js

              //设计稿的尺寸是 375
// postcss.config.jsmodule.exports = {
plugins: {'postcss-pxtorem': {rootValue: 37.5,propList: ['*'],},},
};

桌面端适配

  • Vant 是一个面向移动端的组件库，因此默认只适配了移动端设备，这意味着组件只监听了移动端的 触摸touch 事件，没有监听桌面端的 鼠标mouse 事件。
    • 如果需要在桌面端使用 Vant，可以引入Vant提供的 @vant/touch-emulator。
      • 这个库会在桌面端自动将 mouse 事件转换成对应的 touch 事件，使得组件能够在桌面端使用。
  • 步骤：

    1. 安装@vant/touch-emulator模块

      npm i @vant/touch-emulator -S

    2. 在/src/main.js中导入

      // 引入模块后自动生效
import '@vant/touch-emulator';

底部安全区适配

  • iPhone X 等机型底部存在底部指示条，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行安全区适配。
    • Vant 中部分组件提供了 safe-area-inset-top 或 safe-area-inset-bottom 属性，设置该属性后，即可在对应的机型上开启适配。
  • 步骤：

    1. 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值。

      • /public/index.html

        <metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/>

    2. 在vue组件中使用safe-area-inset-top或safe-area-inset-bottom属性。

      • 顶部安全区适配

        <template><div class="home-root"><!-- 开启顶部安全区适配 --><van-nav-bar safe-area-inset-top /></div>
</template>

      • 底部安全区适配

        <template><div class="home-root"><!-- 开启底部安全区适配 --><van-number-keyboard safe-area-inset-bottom /></div>
</template>

基础页面

<template><div style="height: 2000px"><h1>ClassifyView</h1></div>
</template>
<script>
export default {};
</script>
<style>
</style>

路由配置

  1. 写五个vue页面组件，用于让van-tabbar标签来跳转对应的页面。
    • /src/views/IndexView.vue
      <template><div style="height: 2000px"><h1>IndexView</h1></div>
</template>
<script>
export default {};
</script>
    • /src/views/ClassifyView.vue
      <template><div style="height: 2000px"><h1>ClassifyView</h1></div>
</template>
<script>
export default {};
</script>
    • /src/views/CartView.vue
      <template><div style="height: 2000px"><h1>CartView</h1></div>
</template>
<script>
export default {};
</script>
    • /src/views/MyView.vue
      <template><div style="height: 2000px"><h1>MyView</h1></div>
</template>
<script>
export default {};
</script>
    • /src/views/LoginView.vue
      <template><div style="height: 2000px"><h1>LoginView</h1></div>
</template>
<script>
export default {};
</script>
  2. 配置路由及重定向
    • /src/router/index.js
      import Vue from "vue";
import VueRouter from "vue-router";
import IndexView from "../views/IndexView.vue";Vue.use(VueRouter);const ClassifyView = () =>import(/* webpackChunkName: "ClassifyView" */ "../views/ClassifyView.vue");
const CartView = () =>import(/* webpackChunkName: "CartView" */ "../views/CartView.vue");
const MyView = () =>import(/* webpackChunkName: "MyView" */ "../views/MyView.vue");
const LoginView = () =>import(/* webpackChunkName: "LoginView" */ "../views/LoginView.vue");
const routes = [{path: "/",redirect: "/IndexView",//让`/#/`可以跳转到`/#/IndexView`//component: IndexView,},{path: "*",//让`/#/未定义路径`可以跳转到`/#/IndexView`redirect: "IndexView",},{path: "/IndexView",name: "IndexView",component: IndexView,},{path: "/ClassifyView",name: "ClassifyView",component: ClassifyView,},{path: "/CartView",name: "CartView",component: CartView,},{path: "/MyView",name: "MyView",component: MyView,},{path: "/LoginView",name: "LoginView",component: LoginView,},
];const router = new VueRouter({routes,
});export default router;
  3. 使用vant组件
    • 用[].forEach()
      // 1. 引入vue；
import Vue from "vue";// 2. 引入vant的css样式
import "vant/lib/index.css";// 3. 引入button组件，在组件中使用时是用`van-button`使用
import { Button } from "vant";
Vue.use(Button);// 更集中
import { Tabbar, TabbarItem } from 'vant';
let list01 = [Tabbar, TabbarItem]
list01.forEach(item=>[Vue.use(item)
])
// 等价于：分散的写法
// import { Tabbar, TabbarItem } from 'vant';
// Vue.use(Tabbar);
// Vue.use(TabbarItem);
    • /src/components/FooterPage.vue
      <template><div><van-tabbar v-model="active" active-color="#1baeae" :route="true"><van-tabbar-item icon="home-o" to="/IndexView">首页</van-tabbar-item><van-tabbar-item icon="search" dot to="/ClassifyView"><span>分类</span><template #icon="props"><i class="iconfont icon-fenlei"></i></template></van-tabbar-item><van-tabbar-item icon="shopping-cart-o" badge="5" to="/CartView">购物车</van-tabbar-item><van-tabbar-item icon="user-o" badge="20" to="/MyView">我的</van-tabbar-item></van-tabbar></div>
</template>
<script>
export default {data() {return {active: 0,};},
};
</script>
  4. 改Tabbar图标选中颜色样式
    • /src/components/FooterPage.vue
      <template><div><van-tabbar v-model="active" active-color="#1baeae"></van-tabbar></div>
</template>
  5. 用自定义图标

    • /src/components/FooterPage.vue

      <template><div><i class="iconfont icon-fenlei"></i></div>
</template><style lang="less" scoped>
@import url("../assets/icon.less");
</style>
  6. App组件中使用，但一些页面不用Tabbar组件显示
    • /src/App.vue
      <template><div id="app"><router-view /><FooterPage></FooterPage></div>
</template>
<script>
import FooterPage from "./components/FooterPage.vue";
export default {components: {FooterPage,},
};
</script>
  7. 用路由的mate属性控制App中的Tabbar的显隐
    • /src/router/index.js
      const routes = [{path: "/",redirect: "/IndexView",//让`/#/`可以跳转到`/#/IndexView`//component: IndexView,},{path: "*",//让`/#/未定义路径`可以跳转到`/#/IndexView`redirect: "IndexView",},{path: "/IndexView",name: "IndexView",component: IndexView,meta: {isShowFooter: true,//在这个meta.isShowFooter为true的，显示App.vue中的导航栏。},},{path: "/ClassifyView",name: "ClassifyView",component: ClassifyView,meta: {isShowFooter: true,},},{path: "/CartView",name: "CartView",component: CartView,meta: {isShowFooter: true,},},{path: "/MyView",name: "MyView",component: MyView,meta: {isShowFooter: true,},},{path: "/LoginView",name: "LoginView",component: LoginView,// meta: {//   isShowFooter: false,//或不写;// },},
];const router = new VueRouter({routes,
});
    • /src/App.vue
      <template><div id="app"><router-view /><FooterPage v-show="flag"></FooterPage></div>
</template>
<script>
import FooterPage from "./components/FooterPage.vue";
export default {data() {return {flag: true,};},watch: {$route: {handler(newValue) {console.log(`newValue-->`, newValue);this.flag = newValue?.meta?.isShowFooter || false;},immediate: true,},},components: {FooterPage,},
};
</script>
  8. 开启van-tabbar标签的路由模式，让van-tabbar自动随着路由路径的变化而切换当前选中的van-tabbar-item标签。
    • /src/components/FooterPage.vue
      <template><div><van-tabbar v-model="active" active-color="#1baeae" :route="true"></van-tabbar></div>
</template>
  9. 最终代码
    • /src/App.vue最终代码
      <template><div id="app"><router-view /><FooterPage v-show="flag"></FooterPage></div>
</template>
<script>
import FooterPage from "./components/FooterPage.vue";
export default {data() {return {flag: true,};},watch: {$route: {handler(newValue) {console.log(`newValue-->`, newValue);this.flag = newValue?.meta?.isShowFooter || false;//在这个this.$route.meta.isShowFooter为true的，显示App.vue中的导航栏。},immediate: true,},},components: {FooterPage,},
};
</script><style lang="less" scoped>
// #app {
//   font-family: Avenir, Helvetica, Arial, sans-serif;
//   -webkit-font-smoothing: antialiased;
//   -moz-osx-font-smoothing: grayscale;
//   text-align: center;
//   color: #2c3e50;//   nav {
//     padding: 30px;
//     a {
//       font-weight: bold;
//       color: #2c3e50;
//       &.router-link-exact-active {
//         color: #42b983;
//       }
//     }
//   }
// }
</style>
    • /src/router/index.js最终代码
      import Vue from "vue";
import VueRouter from "vue-router";
import IndexView from "../views/IndexView.vue";Vue.use(VueRouter);const ClassifyView = () =>import(/* webpackChunkName: "ClassifyView" */ "../views/ClassifyView.vue");
const CartView = () =>import(/* webpackChunkName: "CartView" */ "../views/CartView.vue");
const MyView = () =>import(/* webpackChunkName: "MyView" */ "../views/MyView.vue");
const LoginView = () =>import(/* webpackChunkName: "LoginView" */ "../views/LoginView.vue");
const routes = [{path: "/",redirect: "/IndexView",//让`/#/`可以跳转到`/#/IndexView`//component: IndexView,},{path: "*",//让`/#/未定义路径`可以跳转到`/#/IndexView`redirect: "IndexView",},{path: "/IndexView",name: "IndexView",component: IndexView,meta: {isShowFooter: true,//在这个meta.isShowFooter为true的，显示App.vue中的导航栏。},},{path: "/ClassifyView",name: "ClassifyView",component: ClassifyView,meta: {isShowFooter: true,},},{path: "/CartView",name: "CartView",component: CartView,meta: {isShowFooter: true,},},{path: "/MyView",name: "MyView",component: MyView,meta: {isShowFooter: true,},},{path: "/LoginView",name: "LoginView",component: LoginView,// meta: {//   isShowFooter: false,//或不写;// },},
];const router = new VueRouter({routes,
});export default router;
    • /src/components/FooterPage.vue最终代码
      <template><div><van-tabbar v-model="active" active-color="#1baeae" :route="true"><van-tabbar-item icon="home-o" to="/IndexView">首页</van-tabbar-item><van-tabbar-item icon="search" dot to="/ClassifyView"><span>分类</span><template #icon><i class="iconfont icon-fenlei"></i></template></van-tabbar-item><van-tabbar-item icon="shopping-cart-o" badge="5" to="/CartView">购物车</van-tabbar-item><van-tabbar-item icon="user-o" badge="20" to="/MyView">我的</van-tabbar-item></van-tabbar></div>
</template><script>
export default {data() {return {active: 0,};},
};
</script><style lang="less" scoped>
@import url("../assets/icon.less");
</style>

自定义图标

  • /src/components/FooterPage.vue

    <template><div><i class="iconfont icon-fenlei"></i></div>
</template><style lang="less" scoped>
@import url("../assets/icon.less");
</style>

  • /src/assets/icon.less

    @font-face {font-family: "iconfont";/* Project id 3141501 */src: url('//at.alicdn.com/t/font_3141501_ftrvn4vtda5.woff2?t=1642133344053') format('woff2'),url('//at.alicdn.com/t/font_3141501_ftrvn4vtda5.woff?t=1642133344053') format('woff'),url('//at.alicdn.com/t/font_3141501_ftrvn4vtda5.ttf?t=1642133344053') format('truetype');
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-size:22px;
}.icon-gouwucheman:before {content: "\e600";
}.icon-user:before {content: "\e63c";
}.icon-fenlei:before {content: "\e612";
}

滚动修改样式

  1. 样式一般用class代替，用一个变量来控制是否添加一个类名。

    <template><div class="home-root"><div :class="['the-header', flag ? 'is-active' : '']">新峰商城</div></div>
</template><script>
export default {data() {return {flag: false,};},
};
</script><style lang="less" scoped>
.home-root {.the-header {opacity: 0.2;&.is-active {opacity: 1;}}
}
</style>

  2. 一般使用DOMElement.addEventListener()与DOMElement.removeEventListener()操作事件的绑定与解绑。

    • 主要原因是DOM2级事件可以绑定多个。
      • 用DOM0级，只能绑定一个，可能会对其它组件中绑定的事件造成影响。
    • 一般函数方法在methods中进行定义，允许在vue组件的一些生命周期中可以调用到。
      • methods中的方法，可以被DOMElement.addEventListener()与DOMElement.removeEventListener()操作事件的绑定与解绑。
        • 在生命周期中定义的方法，一般很难可以被重复调用。
    • 一般在created()为window之类的全局变量绑定一个方法。
      • 如果涉及到DOM，可以在mounted()中绑定。
    • 在destroyed()为绑定的事件进行解绑，防止内存一直占用，DOM删除不了，造成内存泄露。
    • 事件绑定与解绑说明

      • DOM0级事件绑定与解绑

        • DOM0级事件绑定方式所绑定的事件，可以直接在生命周期中定义

          <script>
export default {data() {return {flag: false,};},created() {console.log(`window-->`, window);window.onscroll = () {let html = document.documentElement || document.body;console.log(`111-->`, 111);if (html.scrollTop > 100) {this.flag = true;} else {this.flag = false;}};},destroyed() {window.onscroll = null},
};
</script>

      • DOM2级事件的绑定与解绑

        • DOM0级事件绑定方式所绑定的事件，一般不能在生命周期中定义。而要在mothods中进行定义。

          • 以便在绑定与解绑时，都能访问到同一个事件。
          <script>
export default {data() {return {flag: false,};},created() {console.log(`window-->`, window);//创建组件的时候向事件池中添加方法--DOM已经存在window.addEventListener("scroll", this.showHeader);},methods: {showHeader() {let html = document.documentElement || document.body;console.log(`111-->`, 111);if (html.scrollTop > 100) {this.flag = true;} else {this.flag = false;}},},destroyed() {window.removeEventListener("scroll", this.showHeader);},
};
</script>

  • 例子完整版

    <template><div class="home-root"><div :class="['the-header', flag ? 'is-active' : '']">新峰商城</div><div class="the-body"><h1>11111</h1><h1>11111</h1><h1>11111</h1></div></div>
</template><script>
export default {data() {return {flag: false,};},created() {console.log(`window-->`, window);// window.onscroll = () => {};//创建组件的时候向事件池中添加方法--DOM已经存在window.addEventListener("scroll", this.showHeader);},methods: {showHeader() {let html = document.documentElement || document.body;console.log(`111-->`, 111);if (html.scrollTop > 100) {this.flag = true;} else {this.flag = false;}},},destroyed() {window.removeEventListener("scroll", this.showHeader);},
};
</script><style lang="less" scoped>
.home-root {.the-header {width: 100%;height: 50px;background-color: #1baeae;text-align: center;color: #fff;font-size: 20px;line-height: 50px;// position: fixed;position: sticky;top: 0;left: 0;opacity: 0.2;&.is-active {opacity: 1;}}.the-body {height: 2000px;}
}
</style>

进阶参考

  1. 新蜂App–项目预览
  2. vant框架–vant2023最新框架-vant4适用于vue3
  3. vant框架–vant3适用于vue2
  4. vue可以用框架有哪些？-vue框架–总结主要使用方向
http://www.jmfq.cn/news/4965229.html

相关文章：

  • dw创建网站导航栏菜单怎么做/百度快照优化排名
  • 唐山企业建网站/怎么拿到百度推广的代理
  • dede做英文网站优化/今日军事新闻最新消息中国
  • 百度为何不收录你的网站产品页/外贸网站优化
  • 网站三站合一/网站注册流程和费用
  • 县网站建设/写软文能赚钱吗
  • 做网站的策划方案/如何做好网上销售
  • 网站关于我们怎么做/百度联盟怎么加入
  • 对网站的赏析/爱站网挖掘词
  • 国内外画画做的好网站/电商培训有用吗
  • 销售产品做单页还是网站/网站seo策划方案案例分析
  • 西安seo网站关键词/裂变营销
  • 中国做木线条的网站/seo北京公司
  • app 网站开发团队人员配置/网络营销策略都有哪些
  • 宁波做网站设计/女教师遭网课入侵直播
  • 推广是不是骗局/seo优化推广技巧
  • 济南自适应网站建设/个人模板建站
  • 网站下载织梦模板/免费关键词搜索工具
  • 什么网站做蜘蛛池/免费seo工具大全
  • 在线免费logo设计生成器/seo网络优化日常工作内容
  • 2015做微网站多少钱/全网整合营销推广方案
  • com网站建设中/线上推广平台哪些好
  • 康定网站建设/网站建设推广
  • 自己做网站分销/近期国际新闻热点大事件
  • 使用wampserver做响应式网站/代理公司注册
  • 什么网站可以做数据调查/百度公司高管排名
  • 长春住房和城乡建设部官方网站/如何制作微信小程序
  • 花店网站建设构思/搭建网站教程
  • 佛山做pc端网站/营销型网站定制
  • 临沂最好的做网站公司/天津提升专业关键词排名