学习51cto中美团中的小知识点--组件实现按需求加载

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- 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中美团中的小知识点--组件实现按需求加载

相关推荐