首页 > 其他 > 详细

学习51cto中美团中的小知识点

时间:2019-08-21 23:54:36      阅读:48      评论:0      收藏:0      [点我收藏+]

标签:sign   sta   oot   page   创建   51cto   otto   --   路由   

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中美团中的小知识点

标签:sign   sta   oot   page   创建   51cto   otto   --   路由   

原文:https://www.cnblogs.com/IwishIcould/p/11391686.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号