1====》vue.20脚手架的创建
cnpm install --global vue-cli 全局安装脚手架
vue init webpack my-project 创建项目 Use ESLint to lint your code? (Y/n) 选择no 它是对你的js代码做检测
Set up unit tests (Y/n) 选择no 知否要做单元测试
Setup e2e tests with Nightwatch? (Y/n) n 端对端测试

  

2===》组件实现按需求加载  (重要)
在项目的根目创建(chajan.babelrc) XXX.babelrc 然后直接复制下面的就可以了(这个是MUse-UI)其他ui框架按需加载的代码 具体的你要看你使用的ui框架的代码 {
"plugins": [
["import", {
"libraryName": "muse-ui",
"libraryDirectory": "lib",
"camel2DashComponentName": false
}]
]
}

  

3===》
Muse-UI 遇到了图标不显示的问题,发现是谷歌字体和meterial图标库的问题,被墙了。
解决问题的链接
http://buzhundong.com/post/muse-ui%E4%B8%8A%E6%89%8B%20%E5%9B%BE%E6%A0%87%E4%B8%8D%E6%98%BE%E7%A4%BA%E9%97%AE%E9%A2%98.html 在index.html中(在项目的根目录) 直接引入字体图标 这是我的解决方案
<link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css">

 

4===》 如何让菜单在最底部
使用固定定位
.container{
position: fixed;
bottom: 0px;
}

 

5===>我们发现在有些设备上(苹果5)   5个菜单不能够完全的显示在同一行
如何做:知道这个设备的宽度(320px)
320/5=64
然后每个子菜单的最小宽度为 64px .mu-bottom-item{
min-width: 64px;
}
6==>当你输入  http://localhost:8080
它会去找这个路由
{
path: '/', // 路径
name: 'index', // 名字
component: () => import('../page/index/index.vue') //
},
它会渲染index.vue这个组件

 

7==》返回到之前的页面
<button @click="back">返回到上一页</button> methods: {
back(){
this.$router.back();//返回到上一页
}
},

  

 8===》  完成注册
引入(1)
import Daohang from '../../components/Daohang'; 注册(2)
components:{
hao:Daohang, key:value key是等会再页面上展示的 value是你引入命名的值
}, (3)使用
<hao></hao>
9===>跳转 相当于是一个a标签
<router-link to="/meishi">meishi</router-link>
等价于==》
<a href="#/meishi" class="">meishi</a>

 

 

 

学习51cto中美团中的小知识点--组件实现按需求加载的更多相关文章

  1. Java学习过程中的总结的小知识点(长期更新)

    Java学习过程中的总结的小知识点 (主要是自己不会的知识和容易搞错的东西) 计算某个程序运行的时间 long stime=System.currentTimeMillis(); copy3(file ...

  2. win7/8系统中php5.3和5.4、5.5不能加载php_curl.dll解决办法

    win7/8系统中php5.3和5.4.5.5不能加载php_curl.dll解决办法   作者:用户 来源:互联网 时间:2016-06-23 18:54:33 php变量注释系统模块 摘要: 本文 ...

  3. 在NVIDIA A100 GPU中使用DALI和新的硬件JPEG解码器快速加载数据

    在NVIDIA A100 GPU中使用DALI和新的硬件JPEG解码器快速加载数据 如今,最流行的拍照设备智能手机可以捕获高达4K UHD的图像(3840×2160图像),原始数据超过25 MB.即使 ...

  4. 关于ligerui 中 grid 表格的扩展搜索功能在远程数据加载时无法使用的解决办法

    要想使用grid里的扩展搜索功能,除了要引用ligerui主要的js文件外,还必须引入下面的JS文件: 1.Source\demos\filter\ligerGrid.showFilter.js 2. ...

  5. 微信小游戏 4M升8M分包加载

    一.微信分包加载 微信分包加载教程 嘛,因为原来的4M太小了,满足不了小游戏内容的需求,现在提升到了8M.这8M可以分包加载,而不需要一次性加载8M. 如果是老版本,则分包加载不起作用,会一次加载8M ...

  6. Flutter学习笔记(25)--ListView实现上拉刷新下拉加载

    如需转载,请注明出处:Flutter学习笔记(25)--ListView实现上拉刷新下拉加载 前面我们有写过ListView的使用:Flutter学习笔记(12)--列表组件,当列表的数据非常多时,需 ...

  7. 【Android开发学习笔记】【高级】【随笔】插件化——资源加载

    前言 上一节我们针对插件最基本的原理进行了一个简单的demo实现,但是由于插件的Context对象被宿主所接管,因此无法加载插件程序的资源.那么如何解决这个问题捏? 有人提出这样的方案:将apk中的资 ...

  8. Spring中 <context:property-placeholder 的使用与解析 .properties 配置文件的加载

    转: Spring中property-placeholder的使用与解析 Spring中property-placeholder的使用与解析 我们在基于spring开发应用的时候,一般都会将数据库的配 ...

  9. cesium中json,geojson,stk,影像切片等数据的加载

    cesium中json.topojson.geojson.stk,影像切片等数据的加载 一.geojson.topojson,json数据的加载 不管是哪种json,都可以通过GeoJsonDataS ...

随机推荐

  1. Oracle 11gR2 RAC网络配置,更改public ip、vip和scanip

    Oracle 11gR2 RAC网络配置,更改public ip.vip和scanip 转载黑裤子 发布于2018-10-30 01:08:02 阅读数 2898  收藏 展开 转载. https:/ ...

  2. sqlserver实现分隔字符串

    sqlserver 使用函数实现分隔字符串 create function dbo.fn_split ( @str_source nvarchar(max), ) ) returns @temp ta ...

  3. Python语法速查: 3. 字符串格式化

    返回目录 (1)简易字符串格式化 字符串属于不可变序列,只能生成新的,不能改变旧的.“字符串格式化”有点像以前C语言的sprintf,可以将若干变量代入格式化的字符串,生成一个符合要求的新字符串. 转 ...

  4. 【论文阅读】Second-order Attention Network for Single Image Super-Resolution

    概要 近年来,深度卷积神经网络(CNNs)在单一图像超分辨率(SISR)中进行了广泛的探索,并获得了卓越的性能.但是,大多数现有的基于CNN的SISR方法主要聚焦于更宽或更深的体系结构设计上,而忽略了 ...

  5. MYSQL的备份与恢复--物理备份xrabackup

    目录 1.数据库完整备份与恢复 (1)环境准备 (2)完全备份恢复流程 2.数据库增量备份与恢复 (1)增量和差异概述 (2)增量备份和恢复 3.数据库差异备份与恢复 4.简单命令进行物理备份 5.实 ...

  6. 整理几个经常在H5移动端开发遇到的东西。

    本篇主要是我个人的学习分享. 1.弹出数字键盘 <!-- 有“#” “*” 符号输入 --> <input type="tel"> <!-- 纯数字 ...

  7. vue自定义指令笔记

    https://cn.vuejs.org/v2/guide/custom-directive.html 在vue中,有时候我们会把抽象的方法封装为一个自定义指令,多个地方共用 比如:拖拽指令 < ...

  8. 解决VirtualBox虚拟机中PM3总是自动断开的问题

    一.问题 运行环境: 虚拟机软件:VirtualBox 6.0.8 r130520 宿主机:Win10 1803 客户机:Ubuntu 19.04 问题: 当插入PM3并连入虚拟机后,PM3过几十秒会 ...

  9. P4762 [CERC2014]Virus synthesis

    题意 真是道回文自动机好题. 首先考虑答案必定是一个回文串+剩余部分的形式,因此可以建出回文自动机,之后考虑每个长度为偶数的回文串. 对于一个长度为偶数的回文串,设它在回文自动机上对应的节点为\(x\ ...

  10. Spring Boot 2.2.0新特性

    Spring Boot 2.2.0 正式发布了,可从 repo.spring.io 或是 Maven Central 获取. 性能提升   Spring Boot 2.2.0 的性能获得了很大的提升. ...