澳门网络娱乐游戏平台-澳门电子游戏娱乐网址-官方直营

Vue.js仿eleme项目(2卡塔尔(英语:State of Qatar)

1.install三个npm包的时候,总是会报这些警报;

澳门注册网址大全,五,项目实战,页面骨架开拓

澳门官方网站 1

1. 建构拆封

  • static目录下加入文件css/reset.css,做css格式的重新恢复生机设置http://cssreset.com澳门官方网站,。
  • 更改index.html,引入reset.css, 加入meta 视口。
<meta name="viewport"
          content = "width=device-width, initial-scale=1.0, maximum-scale=1.0,
    minimum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="static/css/reset.css">
  • 更改eslint语法。在eslintrc.js的rules下边加几个结构:
 'semi': ['error', 'always'],
 'indent': 0
  • main.jsnew Vue({ el: 'body', components: { App } });将body作为四个element挂载点,所以app.vue中写的template代码都在body标签里面。

(Vue2.0中,不要把挂载点设置到 html 可能 body 标签上,因为 Vue 2.0 现在会把组件的 dom 替换成挂载的节点上。所以您需求创设二个子节点,然后挂载上去。卡塔尔(英语:State of Qatar)

  • App.vue中引进组件header并登记。注意我们已经在webpack中写过alias路线,也得以不须要./直接写components;components中的key不要命名叫header,防止警报和原生标签冲突。
import header from './components/header/header.vue';
export default {
    components: {
      'v-header': header
    }
  };
  • 安装stylus依赖。方法一,cnpm install stylus stylus-loader; 方法二,在package.json里面改,然后cnpm install。stylus语法参谋张鑫旭的翻译。

添补有些npm知识:

当你为你的模块安装叁个依靠模块时,符合规律状态下您得先安装他们,在模块根目录下npm install module-name,然后连同版本号手动将她们增加到模块配置文件package.json中的重视里(dependencies卡塔尔(قطر‎。
-savesave-dev能够省掉你手动修改package.json文件的步子。
npm install module-name -save
自动把模块和版本号增多到dependencies部分。
npm install module-name -save-dev
机关把模块和版本号增添到devdependencies部分。

devDependencies 下列出的模块,是大家付出时用的,不会被陈设到分娩条件,比如css-loader。dependencies 下的模块,则是大家分娩条件中须求的正视。

  • 在App.vue中引用header组件<v-header></v-header>;书写tab构造的体裁和模板,使用flex布局(推荐阮风度翩翩峰教程)。

留意大家无需十三分酌量浏览器包容的style样式,因为在 vue-loader/postcss文件能够化解。不过要细心包容景况,仿效那么些http://coding.imooc.com/learn/questiondetail/3644.html
postcss根据http://caniuse.com/书写,宽容性不错。

<style lang="stylus" rel="stylesheet/stylus">
  #app
    .tab
      display: flex
      width: 100%
      height: 40px;
      line-height: 40px
      .tab-item
        flex: 1
        text-align: center
</style>
  1. Vue-router

1.0的文书档案在这里间https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn
遵照课程,大家设置0.7.13本子的vue-router,用npm安装方式同上(package.json中要写在dependencies里面)。

main.js中引用vue-router,根据合Turkey语档的事例来,要用extend语法加start挂载点,无法用new语法。注意app的写法也要变。

components/goods/good.vue (注意import的时候能够不必要.vue后缀)

<template>
  <div>I am goods</div>
</template>

<script type="text/ecmascript-6">
  export default {};
</script>

<style lang="stylus" rel="stylesheet/stylus">

</style>

main.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App';
import goods from 'components/goods/goods';
import ratings from 'components/ratings/ratings';
import seller from 'components/seller/seller';

Vue.use(VueRouter);

let app = Vue.extend(App);

let router = new VueRouter();

router.map({
  '/goods': {
    component: goods
  },
  '/ratings': {
    component: ratings
  },
  '/seller': {
    component: seller
  }
});

router.start(app, '#app');

App.vue

<template>
  <div>
    <v-header></v-header>
    <div class="tab">
      <div class="tab-item">
        <a v-link="{ path: '/goods' }">商品</a>
      </div>
      <div class="tab-item">
        <a v-link="{ path: '/ratings' }">评论</a>
      </div>
      <div class="tab-item">
        <a v-link="{ path: '/seller' }">商家</a>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>
....

跟着我们用router.go('/goods');点名私下认可的路由。(vue-router 2.0 中,router.go 形成 router.push了 参数是均等的.卡塔尔国

接下来增多tab<a>标签的stylus样式。display改为块级成分那样点击不用具体到文字上而是区块上就可以。注意CSS书写标准,先写布局,方框等触发dom重绘的坐落于布局后边,最后才写字体、颜色等能够被三翻五次的。然后把暗中同意的class名字v-link-active换一个名字写进new vuerouter中并加上样式。

 .tab-item
      flex: 1
      text-align: center
      & > a
        display: block
        font-size: 14px
        color: rgb(77, 85, 93)
        &.active
          color: rgb(240,20,20)

let router = new VueRouter({
  linkActiveClass: 'active'
});

几个tips:

比方改的谁对谁错 src 文件夹下的代码,譬如改的 webpack 的安插文件,就需求重启服务。

vue-router hash 方式的大约原理是依赖校正 hash 值,触发 hashChange,然后对应的 hash 去把 router-view 渲染成相应的机件,不会吸引页面包车型地铁重载。

   英特网查资料知道,这么些fsevents是mac下用的,windows忽视就可以;

3. 像素border实现

至于tab栏下边的1像素的兑现,即不管如何dpr值都以1像素(严峻意义上的像素,不是css像素)。由于dpr难点无法一向代码里写1px。手提式无线电话机验证用草料https://cli.im生成二维码能够方便手机查看。

流程:伪元素+Y轴缩放。先使用了mixin书写嵌入代码中的1px代码,即 伪成分相对于成分相对定位后(伪成分是宿主成分的子成分),给伪成分1像素边框。然后给tab的div成分增加新的class, 遵照设备最小dpr实行scallY。那一个代码大家做成全局的以便今后重复使用。

注意:before 和 :after 这八个伪成分,是在CSS2.1里新现身的。起始,伪成分的前缀使用的是单冒号语法,但随着Web的升高,在CSS3的正经八百里,伪元素的语法被涂改成接纳双冒号,成为::before & ::after – 这一个样子,用来跟“伪类(pseudo-classes卡塔尔(قطر‎”区分开,(举个例子 :hover, :active, 等卡塔尔(قطر‎。

Q: 为何在main.js已经全局引进了 mixin.stylus,在组件里还要再度@import mixin.stylus呢?
A: 全局引进后会被编译成全局的css代码,但mixin中的stylus函数不恐怕编写翻译成css,所以 别的构件用到stylus函数时爱莫能助从大局的css中找到,还要在组件中引进mixin.stylus 技艺被编写翻译成完整的css。mixin实际上正是把引用的mixin定义的代码替换成引进的岗位,从stylus的编写翻译考虑,假使您利用了有些mixin定义的代码而不去钦命它引用的渠道,那么它是一心不驾驭从哪去研究这么些mixin定义的。

至于retina像素等等很绕的概念有几个链接阐释的准确性:
https://www.w3cplus.com/css/towards-retina-web.html
http://coding.imooc.com/learn/questiondetail/8563.html
http://benweizhu.github.io/blog/2017/03/25/css-retina-image/

自家的问号,,这段代码不是很懂http://coding.imooc.com/learn/questiondetail/21399.html

实际代码如下:

//mixin.styl

border-1px($color)
  position: relative
  &::after
    display: block
    position: absolute
    left: 0
    bottom: 0
    width: 100%
    border-top: 1px solid $color
    content: ' '

// base.styl

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
  .border-1px-dpr
    &::after
      -webkit-transition: scaleY(0.7)
      transform: scaleY(0.7)

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  .border-1px-dpr
    &::after
      -webkit-transition: scaleY(0.5)
      transform: scaleY(0.5)

// App.vue

...
<style lang="stylus" rel="stylesheet/stylus">
  @import "common/stylus/mixin"
  .tab
    display: flex
    width: 100%
    height: 40px;
    line-height: 40px
    // border-bottom: 1px solid rgba(7, 17, 27, 0.1)
    border-1px(rgba(7, 17, 27, 0.1))
...

 

2.有关在main.js中引进less文件的问题,

澳门官方网站 2

   就能够报那么些错,说相关模块未有找到,这么些难点,小编在英特网找了超级多资料,然后本人也都试了,都倒霉用,于是小编的消除办法正是不在main.js中引进less(小编低头了还不行么,2333),

   其它,若是有明白什么样解决的大牌,能够在底下商讨区告诉作者哦,多谢啊~

澳门官方网站 3

 

3.首先目录布局如下:

 澳门官方网站 4

 

 

 

 

 

 

 

 

 

 

 

 

   然后,在header.vue文件中,想引进mixin.less文件,mixin.less文件内容如下:

澳门官方网站 5

   引进less文件之后,在header.vue文件中使用.bg-img(brand卡塔尔;就能报错:

澳门官方网站 6

   原因正是渠道有标题,在报错中,轻易察觉这几个门路是争执于mixin.less文件的不二等秘书籍,在此个渠道中尚无找到内定的图样能源,当然会报错了,而本身想做的就是让mixin.less中写的背景图片路线是对立于笔者那个header.vue文件来的,然后在 网络找到消灭办法正是改正mixin.less中的代码为:

本文由澳门网络娱乐游戏平台发布于Web前端,转载请注明出处:Vue.js仿eleme项目(2卡塔尔(英语:State of Qatar)

相关阅读