精华内容
下载资源
问答
  • vue实现设置载入动画和初始化页面动画效果移动端页面载入时过长的白屏等待,总是让人心烦气躁不如,加个小动画吧原理很简单在index.html页面的body插入一个divcss里写入动画在app.vue里 created的时候 将这个div移除...

    vue实现设置载入动画和初始化页面动画效果

    移动端页面载入时过长的白屏等待,总是让人心烦气躁

    不如,加个小动画吧

    原理很简单

    在index.html页面的body插入一个div

    css里写入动画

    在app.vue里 created的时候 将这个div移除就ok了

    index.html

    CSS

    app.vue

    最终效果

    以上这篇vue实现设置载入动画和初始化页面动画效果就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

    时间: 2019-10-28

    使用vue-router构建单页应用时,如何给当前页面的标签页添加样式呢? 1.在app.vue文件中你的nav中添加路由地址 2.依然在app.vue文件中,添加样式 不用在任何位置加class,只要在css中写上这个名称,样式自己随意改. 如何在单页切换的时候添加过渡? 1.在app.vue文件中,将router-view包裹在transition中,transition加个name. 2.在app.vue中添加css样式(你的transition的name是什么,第一个单词就是什么) 以上

    PS: 本篇文章使用的React-Router版本为react-router-dom: ^5.0.0 (兼容4.x) 使用过Vue2的同学们应该都知道这个内置组件,它可以帮我们添加过渡动画,之前一直用它来给Vue-Router路由的跳转添加转场动画,使用起来非常便捷.那在React中应该如何给路由切换添加过渡动画呢? react-transition-group 我们需要借助React的官方动画库react-transition-group,文档戳这里 react-tr

    背景 今天在编写页面时,看到页面没有任何效果就只是直入直出,完全没有一点逼格,所以想要实现类似于原生app的那种切换页面时的特效,遂开始google,发现网上各种方案都是各有优缺点,于是整理了自认为优雅的方案并记录下来. 实现难点 如何判断切换路由时是前进还是后退 每次切换时向左向右切换动画如何实现 解决方案 我们需要给各个页面定义层级,在切换路由时判断用户是进入哪一层页面,如果用户进入更高层级那么做前进动画,如果用户退到低层级那么做后退动画. router/index.js import Vu

    首先得有你想要的过渡效果css代码: .vux-pop-out-enter-active, .vux-pop-out-leave-active, .vux-pop-in-enter-active, .vux-pop-in-leave-active { will-change: transform; transition: all 500ms; height: 100%; position: absolute; backface-visibility: hidden; perspective: 1

    前言 在awesomes上寻找移动端框架的时候意外发现了vux的页面切换效果,后面由于其他考虑没有选用vuex但是这个切换效果确实感觉很有新意,也就看了下源码,这里贴一份备用. 需要用到的技术栈:Vue+Vuex 先看看效果图 过渡动画 示例代码 //app.vue

    前言 在日常开发中 动画是必不可少的一部分 不仅能让元素直接的切换显得更加自然 同时也能极大的增强用户体验 因此 在Vue之中也提供了非常强大的关于动画这方面的支持 Vue不仅支持用CSS来写一些过渡效果 同时也是支持JS的 不过在这个文章中讲述的都是如何利用CSS来实现过渡动画.keyframes动画以及实现的原理 过渡动画实现的原理 1.首先最基础的一点在于 如果你想要在单元素/单个组件之中实现过渡动画 那么 你需要在元素/组件所在的HTML标签之外包裹一层  标签

    简介: transition方法的使用 transition内置方法 transition-group animate库实现过渡动画

    L3Byb3h5L2h0dHAvaW1nLmpiemouY29tL2ZpbGVfaW1hZ2VzL2FydGljbGUvMjAxODExLzIwMTgxMTIxMTE1OTI2NjIwLnBuZyYjMDYzOzIwMTgxMDIxMTE1OTM4.jpg

    1.  和多个元素的过渡一样,用组件来替换transition中包裹的标签

    Vue.js 实现微信公众号菜单编辑器功能(一)上一篇菜单的点击和添加菜单功能已经在模版实现了,接下来实现菜单的编辑功能 实现菜单删除方法 在vue实例中添加删除菜单方法,根据选中的菜单级别和索引来删除. methods: { //删除菜单 delMenu:function(){ //删除主菜单 if(this.selectedMenuLevel()==1&&confirm('删除后菜单下设置的子菜单也将被删除')){ if(this.selectedMenuIndex===0){ thi

    定义一个banner.js文件,代码如下 ;window.requestAnimationFrame = window.requestAnimationFrame||function(a){return setTimeout(a,1000/60)}; window.cancelAnimationFrame = window.cancelAnimationFrame||clearTimeout; var FragmentBanner = function(option) { //实例化时,可传的参

    L3Byb3h5L2h0dHAvaW1nLmpiemouY29tL2ZpbGVfaW1hZ2VzL2FydGljbGUvMjAxNzA4LzIwMTc4MTE4NTUyMjUyNi5qcGcmIzA2MzsyMDE3NzExODU1Mzc=.jpg

    源码:https://github.com/doterlin/vue-wxChat 演示地址:https://doterlin.github.io/vue-wxChat/ 运行 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build 介绍 支持文本和图片的展示(后续将

    展开全文
  • 一、项目初始化创建webpack模板项目如下所示:MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project?Project name luffy_project?Project description A Vue.js project?Author hqs?Vue build ...

    一、项目初始化

    创建webpack模板项目如下所示:

    MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project?Project name luffy_project?Project description A Vue.js project?Author hqs?Vue build standalone? Install vue-router?Yes? Use ESLint to lint your code?No?Set up unit tests No? Setup e2e tests with Nightwatch?No? Should we run `npm install` for you after the project has been created?(recommended) npm

    vue-cli · Generated "luffy_project".

    根据提示启动项目:

    $ cd luffy_project/$ npm run dev

    由于在初始化时选择了vue-router,因此会自动创建/src/router/index.js文件。

    删除Helloworld组件相关信息后,index.js文件内容如下所示:

    import Vue from 'vue'import Router from'vue-router'

    //@绝对路径 检索到 ...src/

    //如果Router当做局部模块使用一定要Vue.use(Router)//以后在组件中,可以通过this.$router 获取Router实例化对象//路由信息对象 this.$routes 获取路由配置信息

    Vue.use(Router)//配置路由规则

    export default newRouter({

    routes: [

    {

    'path': '/'

    }

    ]

    })

    二、基于ElementUI框架实现导航栏

    1、elementUI——适合Vue的UI框架

    elementUI是一个UI库,它不依赖于vue,但确是当前和vue配合做项目开发的一个比较好的UI框架。

    (1)npm安装

    推荐使用 npm 的方式安装,能更好地和 webpack 打包工具配合使用。

    $ npm i element-ui -S

    (2)CDN

    目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。

    使用CND引入 Element 需要在链接地址上锁定版本,以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 unpkg.com。

    2、引入 Element

    在项目中可以引入整个Element,或者是根据需要仅引入部分组件。

    (1)完整引入

    在 main.js 中写入如下内容:

    import Vue from 'vue'import App from'./App'import router from'./router'

    //elementUI导入

    import ElementUI from 'element-ui'import'element-ui/lib/theme-chalk/index.css' //注意样式文件需要单独引入//调用插件

    Vue.use(ElementUI);

    Vue.config.productionTip= false;/*eslint-disable no-new*/

    newVue({

    el:'#app',

    router,

    components: { App },

    template:''});

    以上代码便完成了 Element 的完整引入。

    尝试在App.vue使用elementui的Button按钮:

    信息按钮

    name:'App'}

    显示效果:

    (2)按需引入

    借助 babel-plugin-component,可以只引入需要的组件,以达到减小项目体积的目的。

    首先安装babel-plugin-component:

    $ npm install babel-plugin-component -D

    然后将.babelrc文件修改如下:

    {"presets": [["es2015", { "modules": false}]],"plugins": [

    ["component",

    {"libraryName": "element-ui","styleLibraryName": "theme-chalk"}

    ]

    ]

    }

    如果只希望引入部分组件,如Buttion何Select,那么需要在 main.js 中写如下内容:

    import Vue from 'vue';

    import { Button, Select } from'element-ui';

    import App from'./App.vue';

    Vue.component(Button.name, Button);

    Vue.component(Select.name, Select);/*或写为

    * Vue.use(Button)

    * Vue.use(Select)*/

    newVue({

    el:'#app',

    render: h=>h(App)

    });

    3、导航栏实现

    首先创建/src/components/Common/LuffyHeader.vue文件:

    name:'LuffyHeader',

    data(){return{}

    },};

    再创建/static/global/global.css文件:

    *{padding:0;margin:0;

    }body{font-size:14px;color:#4a4a4a;font-family:PingFangSC-Light; /*苹果设计的一款全新的中文系统字体,该字体支持苹果的动态字体调节技术*/

    }ul{list-style:none;

    }a{text-decoration:none;

    }

    在main.js中引入全局样式文件:

    import Vue from 'vue'import App from'./App'import router from'./router'import ElementUI from'element-ui'import'element-ui/lib/theme-chalk/index.css' //样式需要单独引入

    import '../static/global/global.css'import'../static/global/gt.js'

    //调用插件

    Vue.use(ElementUI);

    Vue.config.productionTip= false

    最后在App.vue中引入和使用组件:

    name:'App',

    components:{

    LuffyHeader

    }

    }

    显示效果如下所示:

    三、导航栏路由跳转

    1、组件创建和路由配置编写

    添加“首页”、“免费课程”、“轻课”、“学位课”四大组件,因此创建如下文件:

    src/components/Home/Home.vue

    src/components/Course/Course.vue

    src/components/LightCourse/LightCourse.vue

    src/components/Micro/Micro.vue

    在src/router/index.js中引入组件,配置路由规则:

    import Vue from 'vue'import Router from'vue-router'

    //@绝对路径 检索到 ...src/

    //如果Router当做局部模块使用一定要Vue.use(Router)//以后在组件中,可以通过this.$router 获取Router实例化对象//路由信息对象 this.$routes 获取路由配置信息

    import Home from '@/components/Home/Home'import Course from'@/components/Course/Course'import LightCourse from'@/components/LightCourse/LightCourse'import Micro from'@/components/Micro/Micro'Vue.use(Router)//配置路由规则

    export default newRouter({

    routes: [

    {

    path:'/',

    redirect:'/home' //访问/,直接跳转到/home路径

    },

    {

    path:'/home',

    name:'Home',

    component: Home

    },

    {

    path:'/course',

    name:'Course',

    component: Course

    },

    {

    path:'/home/light-course',

    name:'LightCourse',

    component: LightCourse

    },

    {

    path:'/micro',

    name:'Micro',

    component: Micro

    }

    ]

    })

    2、导航链接编写

    修改 LuffyHeader.vue页面,编写导航链接:

    name:'LuffyHeader',

    data() {return{

    headerList: [

    {id:'1', name: 'Home', title: '首页'},

    {id:'2', name: 'Course', title: '免费课程'},

    {id:'3', name: 'LightCourse', title: '轻课'},

    {id:'4', name: 'Micro', title: '学位课程'}

    ],

    isShow:false}

    }

    }

    编写headerList列表及列表中的导航对象,在 导航栏中遍历对象获取对应信息,显示在页面效果如下所示:

    3、router-link路由跳转

    经过上面的编写,虽然导航栏已经可以正常显示,但是a标签是不会做自动跳转的。 需要使用 router-link 进一步改写LuffyHeader.vue,使得路由跳转得以渲染对应组件:

    name:'LuffyHeader',

    data() {return{

    headerList: [

    {id:'1', name: 'Home', title: '首页'},

    {id:'2', name: 'Course', title: '免费课程'},

    {id:'3', name: 'LightCourse', title: '轻课'},

    {id:'4', name: 'Micro', title: '学位课程'}

    ],

    isShow:false}

    }

    }

    使用to='{name:list.name}'设置命令路由,这样点击a标签就可以跳转了。显示效果如下所示:

    可以看到虽然点击了轻课,但是和其他导航项样式没有任何分别,需要设置路由active样式完成优化。

    4、linkActiveClass设置路由的active样式

    linkActiveClass 全局配置  的默认“激活 class 类名”。

    active-class 设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass来全局配置。

    (1)在路由配置linkActiveClass

    在 src/router/index.js 中做如下配置:

    import Vue from 'vue'import Router from'vue-router'

    //@绝对路径 检索到 ...src/

    //如果Router当做局部模块使用一定要Vue.use(Router)//以后在组件中,可以通过this.$router 获取Router实例化对象//路由信息对象 this.$routes 获取路由配置信息

    import Home from '@/components/Home/Home'import Course from'@/components/Course/Course'import LightCourse from'@/components/LightCourse/LightCourse'import Micro from'@/components/Micro/Micro'Vue.use(Router)//配置路由规则

    export default newRouter({

    linkActiveClass:'is-active',

    routes: [

    {

    path:'/',

    redirect:'/home' //访问/,直接跳转到/home路径

    },

    ......

    {

    path:'/micro',

    name:'Micro',

    component: Micro

    }

    ]

    })

    (2)在LuffyHeader.vue中配置路由active样式

    ......省略

    color: #4a4a4a;

    border-bottom: 4px solid #ffc210;

    }

    (3)显示效果

    5、hash模式切换为 history 模式

    vue-router 默认 hash 模式——使用URL的hash来模拟一个完整的URL,于是当URL改变时,页面不会重新加载。比如http://www.abc.com/#/index,hash值为#/index。hash模式的特点在于hash出现在url中,但是不会被包括在HTTP请求中,对后端没有影响,不会重新加载页面。

    如果不想要这种显示比较丑的hash,可以用路由的 history模式,这种模式充分利用 history.pushState API来完成URL跳转而无需重新加载页面。

    (1)路由修改为history模式

    修改 src/router/index.js 文件如下所示:

    import Vue from 'vue'import Router from'vue-router'

    //@绝对路径 检索到 ...src/

    //如果Router当做局部模块使用一定要Vue.use(Router)//以后在组件中,可以通过this.$router 获取Router实例化对象//路由信息对象 this.$routes 获取路由配置信息

    import Home from '@/components/Home/Home'import Course from'@/components/Course/Course'import LightCourse from'@/components/LightCourse/LightCourse'import Micro from'@/components/Micro/Micro'Vue.use(Router)//配置路由规则

    export default newRouter({

    linkActiveClass:'is-active',

    mode:'history', //改为history模式

    routes: [

    {

    path:'/',

    redirect:'/home' //访问/,直接跳转到/home路径

    },

    .....

    ]

    })

    使用history模式时,url就像正常url,例如http://yoursite.com/user/id,这样比较美观。

    显示效果如下所示:

    (2)后端配置

    但是要用好这种模式,需要后台配置支持。vue的应用是单页客户端应用,如果后台没有正确的配置,用户在浏览器访问http://yoursite.com/user/id 就会返回404,这样就不好了。

    因此要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是app依赖的页面。

    展开全文
  • vue项目初始化

    2021-01-17 17:37:25
    项目初始化 使用 Vue CLI 创建项目 -Vant 组件库的导入方式 制作使用字体图标的方式 如何在 Vue 项目中处理 REM 适配 -axios 请求模块的封装 1.1 使用 Vue CLI 创建项目 如果你还没有安装 VueCLI,请执行下面的...

    项目初始化

    • 使用 Vue CLI 创建项目
      -Vant 组件库的导入方式
    • 制作使用字体图标的方式
    • 如何在 Vue 项目中处理 REM 适配
      -axios 请求模块的封装

    1.1 使用 Vue CLI 创建项目

    如果你还没有安装 VueCLI,请执行下面的命令安装或是升级:

    npm install --global @vue/cli
    
    1. 在命令行中输入以下命令创建 Vue 项目:
    vue create toutiao-m
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FXOipgOb-1610876235582)(./images/Day_001/001 - create.png)]

    1. 选择安装预设
    • default:默认勾选 babel、eslint,回车之后直接进入装包
    • manually:自定义勾选特性配置,选择完毕之后,才会进入装包
    • 选择第 2 种:手动选择特性,支持更多自定义选项
    1. 安装项目中需要使用的库以及功能,分别选择以下几个模块
    • Babeles6es5

    • Router:路由

    • Vuex:数据容器,存储共享数据

    • CSS Pre-processorsCSS预处理器,后面会提示你选择 lesssassstylus

    • Linter / Formatter:代码格式校验

    1. 配置路由模式
    • 是否使用 history 路由模式,这里输入 n 不使用
    1. 选择 CSS 预处理器
    • 项目中选择 Less
    1. 选择代码格式规范
    1. 选择在什么时机下触发代码格式校验

      • Lint on save:每当保存文件的时候
      • Lint and fix on commit:每当执行 git commit 提交的时候
      • 这里建议两个都选上,更严谨
    1. 额外的配置文件的配置
    • BabelESLint 等工具会有一些额外的配置文件,这里的意思是问你将这些工具相关的配置文件写到哪里
      • In dedicated config files:分别保存到单独的配置文件
      • In package.json:保存到 package.json 文件中
    • 里建议选择第 1 个,保存到单独的配置文件,这样方便我们做自定义配置
    1. 是否保存配置预设
    • 这里里是问你是否需要将刚才选择的一系列配置保存起来,然后它可以帮你记住上面的一系列选择,以便下次直接重用
    • 这里根据自己需要输入 y 或者 n,我这里输入 n 不需要
    1. 向导配置结束,开始装包,安装包的时间可能较长,请耐心等待…
    <img src="./images/Day_001/009 - 安装包.png" style="zoom:86%;" />
    

    1. 安装结束,命令提示你项目创建成功,按照命令行的提示在终端中分别输入
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lz9B4j6N-1610876235601)(./images/Day_001/010 - 包安装完成.png)]
    
    1. 进入你的项目目录,并启动项目
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LXnW1QQp-1610876235603)(./images/Day_001/011 - 启动并运行项目.png)]
    
    1. 项目运行成功
    - 启动成功,命令行中输出项目的 http 访问地址
    
    - 打开浏览器,输入其中任何一个地址进行访问
    
      
    
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HhJ64Dt3-1610876235605)(./images/Day_001/012 - 运行项目.png)]
    
    1. 如果能看到该页面,恭喜你,项目创建成功了
    <img src="./images/Day_001//013 - 启动成功.png" style="zoom: 67%;" />
    

    1.2 加入 Git 版本管理

    1. 加入 git 版本管理的好处:
    • 代码备份
    • 多人协作
    • 历史记录
    1. 创建远程仓库
    1. 使用码云或者 Github 自行创建一个线上仓库
    1. 将本地仓库推到线上

      • 如果没有本地仓库

        // 创建本地仓库
        git init
        
        // 将文件添加到暂存区
        git add 文件
        
        // 提交历史记录
        git commit "提交日志"
        
        // 添加远端仓库地址
        git remote add origin 你的远程仓库地址
        
        // 推送提交
        git push -u origin master
        
      • 如果已有本地仓库(Vue CLI 已经帮我们初始化好了)

        // 添加远端仓库地址
        git remote add origin 你的远程仓库地址
        
        // 推送提交
        git push -u origin master
        
      • 如果之后项目代码有了变动需要提交:

        git add .
        
        git commit xxx
        
        git push
        
    2. 其他分支命令

    • 验证远程仓库是否添加成功

    • git push 报错的提示含义


    1.3 调整初始目录结构

    1. 默认生成的目录结构不满足我们的开发需求,所以这里需要做一些自定义改动。这里主要就是下面的两个工作:
    • 删除初始化的默认文件
    • 新增调整我们需要的目录结构
    1. App.vue 修改为
    <template>
      <div id="app">
        <h1>黑马头条</h1>
        <router-view />
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    <style scoped lang="less"></style>
    
    
    1. router/index.js 修改为
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)
    
    // 配置路由表
    const routes = []
    
    const router = new VueRouter({
      routes
    })
    
    export default router
    
    
    1. 删除不需要的文件
    • src/views/About.vue
    • src/views/Home.vue
    • src/components/HelloWorld.vue
    • src/./images/Day_001/logo.png
    1. 创建以下几个目录
    • src/api 目录

      • 存储接口封装
    • src/utils 目录

      • 存储一些工具模块
    • src/styles 目录

      • index.less 文件,存储全局样式
      • main.js 中加载全局样式
      // 导入全局的样式文件
      import './styles/index.less'
      
    1. 调整之后的目录结构如下
    ├── README.md                     
    ├── babel.config.js               
    ├── package-lock.json             
    ├── package.json                  
    ├── public                        
    │   ├── favicon.ico               
    │   └── index.html                
    └── src                           
        ├── api
        ├── App.vue                   
        ├── assets                    
        ├── components                
        ├── main.js                   
        ├── router
        ├── utils
        ├── styles
        ├── store                     
        └── views
    

    1.4 导入图标素材

    设计师为我们单独提供了设计稿中的图标,配置到项目中使用有两种方式:

    为了方便使用,我们在这里把它制作为字体图标。

    制作字体图标的工具有很多,在这里我们推荐大家使用:https://www.iconfont.cn/

    1. 注册账户
    • 直接选择第三方登录即可
    image-20200325004756766 image-20200325004912687
    1. 创建项目
    image-20200325005117323 image-20200325005648620 image-20200325010034390
    1. 上传图标到项目
    image-20200325010119980 image-20200325010201945 image-20200325010254398 image-20200325010413448 image-20200325010439802
    1. 生成链接
    image-20200325010505302
    1. styles 目录下新建 icon.less 文件
    • 生成在线地址后,在浏览器中打开,并复制代码
    • icon.less 文件中进行粘贴
    1. index.less 文件中导入 icon.less 文件
    • 导入文件后后面加 ;
    // 导入字体图标文件
    @import './icon.less';
    
    1. App.vue 文件中测试
    • 其中 toutiao 是基准类名
    <div>
      <i class="toutiao toutiao-pinglun"></i>
    </div>
    

    1.5 引入 Vant 组件库

    ant 是有赞商城前端开发团队开发的一个基于 Vue.js 的移动端组件库,它提供了非常丰富的移动端功能组件,简单易用

    1.5.1 Vant 组件库介绍

    1.5.2 使用 Vant的四个方式

    1. 自动按需引入组件
    • 和方式二一样,都是按需引入,但是加载更方便一些(需要额外配置插件)
    • 优点:打包体积小
    • 缺点:每个组件在使用之前都需要手动加载注册
    1. 手动按需引入组件
    • 在不使用插件的情况下,可以手动引入需要的组件
    • 优点:打包体积小
    • 缺点:每个组件在使用之前都需要手动加载注册
    1. 导入所有组件
    • Vant 支持一次性导入所有组件,引入所有组件会增加代码包体积,因此不推荐这种做法
    • 优点:导入一次,使用所有
    • 缺点:打包体积大
    1. 通过 CDN 引入
      • 使用 Vant 最简单的方法是直接在 html 文件中引入 CDN 链接,之后你可以通过全局变量vant访问到所有组件。
      • 优点:适合一些演示、示例项目,一个 html 文件就可以跑起来
      • 缺点:不适合在模块化系统中使用

    1.5.3 项目中使用

    前期开发的便利性我们选择方式三:导入所有组件,在最后做打包优化的时候根据需求配置按需加载以降低打包体积大小

    1. 安装 Vant
    cnpm i vant -S
    
    1. main.js 中加载注册 Vant 组件
    import Vue from 'vue'
    import Vant from 'vant'
    import 'vant/lib/index.css'
    
    Vue.use(Vant)
    
    1. 查阅文档使用组件

    Vant 的文档非常清晰,左侧是组件目录导航,中间是效果代码,右边是效果预览。

    1. App.vue 中使用 Vant 中的组件

      <!-- 按钮组件的使用 -->
      <van-button type="default">默认按钮</van-button>
      <van-button type="primary">主要按钮</van-button>
      <van-button type="info">信息按钮</van-button>
      <van-button type="warning">警告按钮</van-button>
      <van-button type="danger">危险按钮</van-button>
      
      <!-- 单元格组件 -->
      <van-cell-group>
        <van-cell title="单元格" value="内容" />
        <van-cell title="单元格" value="内容" label="描述信息" />
      </van-cell-group>
      
    2. 如果在页面中能够正常的看到下面的效果,则说明 Vant 导入成功了

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ENokBt8l-1610876235607)(./images/Day_001/018 - 组件的使用.png)]


    1.6 移动端 REM 适配

    1.6.1 移动端 REM 适配介绍

    1. Vant 中的样式默认使用 px 作为单位,如果需要使用 rem 单位,推荐使用以下两个工具:
    • [lib-flexible 用于设置 rem 基准值,设置根字体的大小
    • postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem

    1.6.2 使用 lib-flexible 动态设置 REM 基准值

    html 标签的字体大小

    1. 安装

      // yarn add amfe-flexible
      
      cnpm i amfe-flexible -S
      
    2. 然后在 main.js 中加载执行该模块

    import 'amfe-flexible'
    
    1. 最后测试:在浏览器中切换不同的手机设备尺寸,观察 html 标签 font-size 的变化
    • 例如在 iPhone 6/7/8 设备下,html 标签字体大小为 37.5 px

    • 例如在 iPhone 6/7/8 Plus 设备下,html 标签字体大小为 41.4 px

    1.6.3 使用 postcss-pxtorempx 转为 rem

    1. 安装
    // yarn add -D postcss-pxtorem
    // -D 是 --save-dev 的简写
    
    cnpm install postcss-pxtorem -D
    
    1. 然后在项目根目录中创建 .postcssrc.js 文件
    module.exports = {
      plugins: {
        'autoprefixer': {
          browsers: ['Android >= 4.0', 'iOS >= 8']
        },
        'postcss-pxtorem': {
          rootValue: 37.5,
          propList: ['*']
        }
      }
    }
    
    1. 配置完毕,重新启动服务
    npm run serve
    
    1. 最后测试:刷新浏览器页面,审查元素的样式查看是否已将 px 转换为 rem
    • 转换之前的样式
     <img src="./images/Day_001/021 - 配置之前的尺寸.png" style="zoom:60%;" />
    
    • 转换之后的样式

    1. 注意事项:
    • 该插件不能转换行内样式中的 px,例如 <div style="width: 200px;"></div>

    1.7 关于 .postcssrc.js 配置文件

    1.7.1 .postcssrc.js 的配置

    1. .postcssrc.js 是 PostCSS 的配置文件,具体配置如下
    module.exports = {
      plugins: {
        'autoprefixer': {
          browsers: ['Android >= 4.0', 'iOS >= 8']
        },
        'postcss-pxtorem': {
          rootValue: 37.5,
          propList: ['*']
        }
      }
    }
    
    

    1.7.2 PostCSS 介绍

    1. PostCSS 介绍
    • PostCSS 是一个处理 CSS 的处理工具,本身功能比较单一,它主要负责解析 CSS 代码,再交由插件来进行处理,它的插件体系非常强大,所能进行的操作是多种多样的,例如
    • 目前 PostCSS 已经有 200 多个功能各异的插件。开发人员也可以根据项目的需要,开发出自己的 PostCSS 插件
    1. PostCSS 一般不单独使用,而是与已有的构建工具进行集成

    1.7.3 Autoprefixer 插件的配置

    1. autoprefixer 是一个自动添加浏览器前缀的 PostCss 插件,browsers 用来配置兼容的浏览器版本信息
    1. 但是写在这里的话会引起编译器警告
    • 警告意思就是说你应该将 browsers 选项写到 package.json.browserlistrc 文件中
    • Vue-cli 中已经默认开启了 autoprefixer,所以把这两行代码注释
    • 注释后重启服务就可以解决掉警告信息

    1.7.4 postcss-pxtorem 插件的配置

    1. postcss-pxtorem 插件的配置
    • rootValue:表示根元素字体大小,它会根据根元素大小进行单位转换
    • propList 用来设定可以从 px 转为 rem 的属性
      • 例如 * 就是所有属性都要转换,width 就是仅转换 width 属性
    1. rootValue 应该如何设置呢
    如果你使用的是基于 lib-flexable 的 REM 适配方案,则应该设置为你的设计稿的十分之一。
    例如设计稿是 750 宽,则应该设置为 75

    大多数设计稿的原型都是以 iphone6 为原型,iphone6 设备的宽是 750,我们的设计稿也是这样。

    但是 Vant 建议设置为 37.5,为什么呢?

    因为 Vant 是基于 375 写的,所以如果你设置为 75 的话,Vant 的样式就小了一半。
    

    所以如果设置为 37.5 的话,Vant 的样式是没有问题的,但是我们在测量设计稿的时候都必须除2才能使用,否则就会变得很大。

    这样做其实也没有问题,但是有没有更好的办法呢?我就想实现测量多少写多少(不用换算)。于是聪明的你就想,可以不可以这样来做?

    • 如果是 Vant 的样式,就把 rootValue 设置为 37.5 来转换
    • 如果是我们的样式,就按照 75 的 rootValue 来转换
    1. 通过查阅文档我们可以看到 rootValue 支持两种参数类型
    • 数字:固定值
    • 函数:动态计算返回
      • postcss-pxtorem 处理每个 CSS 文件的时候都会来调用这个函数
      • 它会把被处理的 CSS 文件相关的信息通过参数传递给该函数
    • 修改配置如下
    /**
     * PostCSS 配置文件
     */
    
    module.exports = {
      // 配置要使用的 PostCSS 插件
      plugins: {
        // 配置使用 autoprefixer 插件
        // 作用:生成浏览器 CSS 样式规则前缀
        // VueCLI 内部已经配置了 autoprefixer 插件
        // 所以又配置了一次,所以产生冲突了
        // 'autoprefixer': { // autoprefixer 插件的配置
        //   // 配置要兼容到的环境信息
        //   browsers: ['Android >= 4.0', 'iOS >= 8']
        // },
    
        // 配置使用 postcss-pxtorem 插件
        // 作用:把 px 转为 rem
        'postcss-pxtorem': {
          rootValue ({ file }) {
            return file.indexOf('vant') !== -1 ? 37.5 : 75
          },
          propList: ['*']
        }
      }
    }
    
    
    1. 其他
    [Android]
    >= 4.0
    
    [iOS]
    >= 8
    
    
    1. 配置完毕,把服务重启一下,最后测试,very good

    1.8 封装请求模块

    和之前项目一样,这里我们还是使用 axios 作为我们项目中的请求库,为了方便使用,我们把它封装为一个请求模块,在需要的时候直接加载即可

    1. 安装 axios
    cnpm i axios -S
    
    1. 创建 src/utils/request.js
    /**
     * 封装 axios 请求模块
     */
    import axios from "axios"
    
    const request = axios.create({
      baseURL: "http://ttapi.research.itcast.cn/" // 基础路径
    })
    
    export default request
    
    1. 如何使用
    • 方式一(简单方便,但是不利于接口维护):我们可以把请求对象挂载到 Vue.prototype 原型对象中,然后在组件中通过 this.xxx 直接访问
    • 方式二(推荐):我们把每一个请求都封装成每个独立的功能函数,在需要的时候加载调用,这种做法更便于接口的管理和维护

    在我们的项目中更推荐建议使用方式二,(在随后的业务功能中我们就能学到)

    展开全文
  • 在实际开发中,遇到了在初始化页面的时候,在network中,请求被调用了两次 本来以为是created里面出了问题,却没有注意watch中的一个小细节,在watch中写了一个 immediate设为true后,则监听的这个对象会立即输出,也...

    在实际开发中,遇到了在初始化页面的时候,在network中,请求被调用了两次

     本来以为是created里面出了问题,却没有注意watch中的一个小细节,在watch中写了一个

     immediate设为true后,则监听的这个对象会立即输出,也就是说一刷新页面就会在控制台输出,当然此时页面上的数据我们还没来得及让其发生变化,也就是说问题就出在了这里,把immediate改为false,就OK了

    展开全文
  • vue如何初始化computed

    2021-05-07 11:01:39
    总结:computed初始化得时候会给每个成员分配一个watcher,用来监听,缓存结果,响应式数据还是通过Object.defineProperty来实现,里面得get方法中 1。watcher.dirty,当数据发生变化 dirty会为true(数据变化时会...
  • Vue 初始化 执行过程

    2021-01-09 17:39:52
    Vue 初始化 执行过程 先在platforms 下的 entry-runtime-with-compile.js 调用 Vue.$mountd 的获取el对象, 挂载mount方法 ,将Vue的模块导出 找到 core/instance/index.js ,获取 vue的构造函数, 初始化Vue 上的...
  • 结果页面初始化时,就会弹出一个提示框 点击我绑定message事件得button按钮时,也会报错 最后发现只需要修改一行代码 // Vue.use(Message); Vue.prototype.$message = Message; 将vue.use(Message)换成Vue....
  • vue初始化watch

    2021-07-27 10:40:30
    vue源码中找到initWatch 基本得逻辑就是initWatch —> createWatcher() ----> vm.$watch() ----> new Watcher(); **1.initWatch ** function initWatch (vm: Component, watch: Object) { for (const...
  • VUE项目初始化

    2020-12-18 22:25:12
    Vue项目初始化Vue项目请求生命周期和文件组件创建vue文件:user用户页面export default {name: "User",components: {Nav,Footer,},data(){return {}},methods: {}}1.入口文件:加载vue、router、store等配置 以及 ...
  • Vue.js data恢复初始化数据的实现方法发布于 2020-2-26|复制链接分享一篇关于vue data恢复初始化数据的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小妖过来看看吧在我们进行vue开发过程中,经常会...
  • 父组件代码 <template> //子组件中绑定ref ... mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。 扩展:应该也可以使用Vue-bus和store解决。
  • 场景是:页面有一个“重新填写”的操作,这时,应该是清空所有的数据。目前我的做法是每个输入框作为data对象的属性都单独绑定一个属性,当点击‘重新填写’时,需要一个一个的取清空,这样的处理感觉不是很好。野...
  • vue 入口从vue的构建过程可以知道,web环境下,入口文件在 src/platforms/web/entry-runtime-with-compiler.js(以Runtime + Compiler模式构建,vue直接运行在浏览器进行编译工作)import Vue from './runtime/index'...
  • vue2 几种初始化 挂载方式 常见的new Vue 传入el和render的方式 【在cli创建出的项目中】 el 类型:string | Element 限制:只在用 new 创建实例时生效。 详细: 提供一个在页面上已存在的 DOM 元素作为 Vue ...
  • Vue项目初始化步骤

    2021-03-09 17:09:36
    1.项目初始化 安装 Vue 脚手架 通过 Vue 脚手架创建项目 配置 Vue 路由 配置 Element-UI 组件库 配置 axios 库 初始化 git 远程仓库 将本地项目托管到 github 中 1.安装 Vue 脚手架 npm install vue-cli -g 2-3....
  • vue3初始化项目

    2021-09-13 14:34:46
    创建好项目,认识了项目目录,要开始做项目的前提,还是初始化项目: 初始化项目——设置别名 初始化项目——设置全局样式内容 初始化项目——封装网络请求 ** 1、设置别名alias ** @ is an alias to /src 新建一...
  • 了解Vue的生命周期和渲染原理,有助于我们深层次的理解钩子函数的作用和调用场景,同时理解当数据发生变化之后,Vue内部做了哪些事情来响应。如果有误,请及时评论,方便完善。码字不易,请尊重版权。本片文章是基于...
  • vue 有8个声明周期,如果在vue实例创建之前需要获取页面初始数据。此时要进行ajax请求,应该是同步还是异步好?beforeCreate:function(){// getInitData ajax请求获取数据}我想着应该异步,那么如果异步请求,页面会...
  • 超详细vue生命周期解析(详解)深入理解_勤动手多动脑少说多做厚积薄发-CSDN博客代码:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content=...
  • * 重置elementui的初始化loading加载信息 */ import {Loading} from "element-ui"; import {DeBounce} from "./debounce.js";//防抖函数后续文章介绍 let Loading = ""; let loadingRequestCount = 0; function ...
  • 该组件初始状态下的data 单独重置data中的某一个对象或者属性 this.form = this.$options.data().form 但是有可能会出现问题 用 this.$options.data() 重置组件data时,data() 里用this获取的props或methods都为...
  • Vue3 程序初始化流程

    2021-07-18 15:42:02
    vue3中,程序的初始化不再沿用vue2的new Vue()方法,而是使用了createApp。在createApp中发生了什么呢? 改写的原因 createApp是一个Vue中的工厂函数,以函数的方式进行导入和调用。而函数式的好处是 1、消灭了...
  • * vue中computed计算属性,页面高度自适应问题 */ <div :style="resizeHeight"> <el-menu :default-active="routePath" class="el-menu-vertical-demo" background-color="#333" text-color="#fff" ...
  • 可以对选择的语言进行...1、vue国际Dropdown使用页面,在handleCommand方法里,把切换的语言储存到localStorage 2、在挂载到main文件的language.js中,把i18n对象的储存语言获取,默认值 'zh' 中文 ...
  • 使用Vue实现调用接口加载页面初始数据闲着没事写了一个电影推荐的网页,很简单,使用的是Vue的实现.let vm = new Vue({el:'#content',data:{name:'',pic:'',actor:'',detail:'',link:''},mounted:function () {this....
  • created(el没有初始化,数据已加载完成);mounted(el没有初始化,数据已加载完成); mounted(el没有初始化,数据已加载完成);mounted(el已被初始化,数据已加载完成); mounted需要操作dom,不承诺所有子...
  • 在做项目的时候,如果使用到了keep-alive来缓存动态组建的时候,我们需要在deactivated(){}方法中来实现跳转页面初始化页面数据,就需要用到 Object.assign(this.$data, this.$options.data.call(this)) 但有的...
  • vue项目初始化步骤

    2020-12-19 18:39:20
    一、安装Vue脚手架安装步骤参考上篇博文及Vue-cli官方文档二、通过Vue脚手架创建项目通过GUI...点击创建按钮4.1选择要创建项目的目路确定4.2进入详情,在项目文件夹位置,填写项目名称(必须英文)4.3上拉打开初始化...
  • 场景:在.vue文件的props中的某值用watch监听了,因为做了监听,所以没有在比如created、mounted等生命周期对此值做操作,但是实际上在初始化页面时,监听没有生效。 之后我加了immediate:true, 页面 初始化时就...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 60,269
精华内容 24,107
关键字:

vue页面初始化

vue 订阅
友情链接: 10-kinds.zip