![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue CLI实操
文章平均质量分 58
IE_Oxygen2.0
这个作者很懒,什么都没留下…
展开
-
vue的过渡效果踩坑
过度效果为了添加vue的过渡效果<transition >,显示和消失需要使用v-if来控制,而不能使用v-show。因为transition的过度,不支持 display:none;和display:block;等只有一种或两种状态的属性,应该是对dom的改变而生效。转而言之,vue控制过渡的各个状态,是指dom元素插入和离开document过程的状态。参考:Vue.js 过渡 & 动画 | 菜鸟教程 (runoob.com) vue 在vue项目中使用动画 trans原创 2021-09-14 21:36:45 · 192 阅读 · 0 评论 -
路由懒加载和图片懒加载
懒加载在项目中为了优化加载速度和节约资源,会使用懒加载这一概念。下面例子是基于vue框架实现的懒加载。路由懒加载vue项目实现路由按需加载(路由懒加载)的3种方式 - 简书 (jianshu.com)路由懒加载 | Vue Router (vuejs.org)常用方法:es规范的import()注意:webpackChunkName可以把某个路由下的所有组件都打包在同个异步块 (chunk) 中图片懒加载懒加载原理是什么先将 img 标签中的src链接设为同一张图片(空白图片),将其真正原创 2021-09-14 21:32:25 · 813 阅读 · 0 评论 -
Vue CLI 入门09 Vuex进阶
Vuex核心概念成员列表:state 存放状态getters 加工state成员给外界mutations state成员操作方法actions 异步操作modules 模块化状态管理State 单一状态树Single Source of Truth 单一数据源只创建一个store,永远对应$store来使用Getters相当于计算属性,如果需要对state做一定处理后再交给组件,则使用gettersgetters的计算属性会默认传入两个参数(state, getters).原创 2021-08-20 20:44:57 · 181 阅读 · 0 评论 -
Vue CLI 入门08 Vuex基础
VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window),提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vu原创 2021-08-20 20:41:04 · 95 阅读 · 0 评论 -
Vue CLI 入门07 vue-router通过query属性传参
通过query实现利用URL往组件传递参数新建组件profile添加到路由映射在App.vue中模板添加<router-link v-bind:to="{path:'/profile', query:{name:'Oxygen', age:21 }}" tag="button">档案</router-link>v-bind绑定to和一个对象,对象中有path路径和query属性,在此处指定query属性可以存放数据(App.vue的data也可以)也可原创 2021-08-03 23:07:55 · 142 阅读 · 0 评论 -
Vue CLI 入门06 vue-router路由守卫(导航守卫)
路由守卫(导航守卫)监听路由的跳转过程举例:全局路由守卫,在路由配置文件中router.beforeEach方法需求:跳转不同组件,title显示不同名称在各个一级组件的route中添加meta属性,放置对应titleconst roomroute = { path: '/room', component: Room, meta:{ title:'房间' }};然后使用全局前置守卫router.beforeEach((to, from, next) =>原创 2021-08-03 23:02:57 · 200 阅读 · 0 评论 -
Vue CLI 入门05 vue-router路由嵌套与keep-alive
路由嵌套即在某个组件内,再通过路由嵌套子组件,类似于tab页;如 /home 路径下有 /home/news 和 /home/message 两个路径,并分别对应不同组件嵌套再home组件中再home页面中,通过访问/home/news 和 /home/message来访问一些内容1、创建对应的子组件,并在路由映射中配置对应的子路由类似Home.vue新建HomeNews.vue和HomeMessage.vue组件在router的index.js中以懒加载的方式引入const Hom原创 2021-08-03 22:59:28 · 583 阅读 · 0 评论 -
Vue CLI 入门04 vue-router懒加载
懒加载前提npm run build对vue项目打包自动生成dist文件夹,里面有js文件夹;js目录下,app文件为我们自己写的业务文件;chunk-vendor文件为第三方框架/库(如vue、axios、vue-router等)。插入:vue-cli4 打包时的踩坑打包时报错Error: Callback was already called.网上的解决方法是把node_modules删除后,npm install,再打包。实测无效。有效方法是:新建一个和package.jso原创 2021-08-03 22:51:38 · 178 阅读 · 0 评论 -
vue-cli4 打包报错Callback was already called
vue-cli4 打包时的踩坑npm run build打包时报错Error: Callback was already called.网上的寥寥无几的解决方法是把node_modules删除后,npm install,再打包。实测无效。有效方法是:新建一个和package.json同级的vue.config.js文件往里面添加module.exports = { css: { extract: false }}再次打包,succeed!具体原因希望大佬原创 2021-07-28 10:45:06 · 2757 阅读 · 7 评论 -
Vue CLI 入门03 vue-router 动态路由
Vue-router进阶动态路由我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染,像 /user/foo 和 /user/bar 都将映射到相同的组件。1、添加路由关系在components目录新建User.vue文件,内容形式和之前的home差不多,作为一个组件使用。在router/index.js引入Userimport User from '../components/User.v原创 2021-07-28 01:15:11 · 328 阅读 · 0 评论 -
Vue CLI 入门02 vue-router基础
Vue-router管理组件和URL之间的映射关系一、搭建基础框架安装npm install vue-router --save手动配置具体文件在src目录下新建router目录,再新建index.js文件存放路由信息目录结构:配置index.js文件//1、配置路由相关信息import VueRouter from 'vue-router'import Vue from 'vue'//2、通过Vue.use(插件)来安装插件Vue.use(VueRouter)原创 2021-07-26 16:02:14 · 120 阅读 · 0 评论 -
Vue CLI 入门01 新建一个项目
Vue CLICommand-Line Interface,命令行界面Vue CLI是官方发布vue.js项目脚手架使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置配置前提安装node安装webpack安装Vue脚手架npm install -g @vue/cli 全局安装(vue cli4)vue cli4和3有一定不同,参考博文:vue cli3 和 vue cli4 - 苏小米 - 博客园 (cnblogs.com)创建项目在文件目录下执行原创 2021-07-24 19:20:14 · 66 阅读 · 0 评论