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. C#&.Net干货分享-构建Aocr_ImageHelper读取图片文字做解析

    直接源码,就是这么干脆... namespace Frame.Image{    /// <summary>    ///     /// </summary>    publ ...

  2. 题解:SPOJ1026 Favorite Dice

    原题链接 题目大意 给你一个n个面的骰子,每个面朝上的几率相等,问每个面都被甩到的期望次数 题解 典型的赠券收集问题. 我们考虑当你手上已有\(i\)种不同的数,从集合中任选一个数得到新数的概率,为\ ...

  3. 剑指Offer-28.数组中出现次数超过一半的数字(C++/Java)

    题目: 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组中出现了5次,超过数组长度的一半,因此输出2.如 ...

  4. C#开发BIMFACE系列28 服务端API之获取模型数据13:获取三维视点或二维视图列表

    系列目录     [已更新最新开发文章,点击查看详细] 本篇主要介绍如何获取一个模型中包含的三维视点或二维视图列表. 请求地址:GET https://api.bimface.com/data/v2/ ...

  5. ubuntu18.04 中个性化配置vim方法

    1:新建配置文件 在终端里输入:vi ~/.vimrc (vimrc是vim的配置文件,每次打开vim时会自动加载这个文件里的配置) 2:配置的代码如下:直接就可以复制到里面然后保存就行 set ai ...

  6. css兄弟选择器,+ ~选择器的区别

     壹 ❀ 引 实习生在写搜索框下拉提示时,遇到了不知道怎么解决的问题,所以来问我.效果不难,鼠标选中输入框(focus)时,展示搜索关键字相关提示,看了眼dom结构是这样的: 在她的理解里面,选中父元 ...

  7. 实例调用(__call__())

    任何类,只需要定义一个__call__()方法,就可直接对实例进行调用 对实例进行直接调用就好比对一个函数进行调用一样 __call__()还可定义参数,所以调用完全可以把对象看成函数,把函数看成对象 ...

  8. 《细说PHP》第四版 样章 第18章 数据库抽象层PDO 6

    18.5.3  PDO的错误处理模式 PDO共提供了3种不同的错误处理模式,不仅可以满足不同风格的编程,也可以调整扩展处理错误的方式. 1.PDO::ERRMODE_SILENT 这是默认模式,在错误 ...

  9. njnja 安装

    git clone git://github.com/ninja-build/ninja.git && cd ninja 安装re2c wget  https://kojipkgs.f ...

  10. MySQL for OPS 11:优化

    写在前面的话 不管是作为运维还是作为 DBA,我们的工作都不是写 SQL,搞业务.更多的还是如何实现又好又快的给开发提供一个数据库环境和保障数据的安全性.前面的文章中读写分离,高可用,建立索引,分库分 ...