Vue2.0 开发项目_快速配置

写在前面的话：

　　假设已经安装好啦,可参照 之前的一篇文章

那么接下来是一次性配好所需的工具：

一、下载相关依赖：在package.json中，加入以下内容：

　　

　　再 npm install

　　再 npm run dev

二、配置文件夹

　　可参照 之前的一篇文章 （我用到了这篇文章的 reset.css, 以及 .vue的通用模板，特别要注意 data.json的写法！！！）

　　下图为配置好了之后的截图：

　　　　

　　各个文件的数据可按需自行配置~

三、我的常规步骤：

　　1. 先进行对路由的设置，路由router文件夹中有一个 index.js 文件，可以在此处定义重定向，引入路由等操作，可参考如下代码：

import Vue from 'vue'
import Router from 'vue-router'
import VueResource from 'vue-resource'
import home from './home/home'
import community from './community/community'
import course from './course/course'
import personal from './personal/personal'

Vue.use(Router)
Vue.use(VueResource)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/home',
      component: home
    },
    {
      path: '/home',
      name: 'home',
      component: home
    },
    {
      path: '/community',
      name: 'community',
      component: community
    },
    {
      path: '/course',
      name: 'course',
      component: course
    },
    {
      path: '/personal',
      name: 'personal',
      component: personal
    }
  ]
})

 　　页面中路由的使用：

<div class="row">
　　<router-link to="/home" class="router-item"><i class="icon iconfont icon-xinxi"></i>主页</router-link>
　　<router-link to="/community" class="router-item"><i class="icon iconfont icon-xinxi"></i>社区</router-link>
　　<router-link to="/course" class="router-item"><i class="icon iconfont icon-qq"></i>课程</router-link>
　　<router-link to="/personal" class="router-item"><i class="icon iconfont icon-weixin"></i>我的</router-link>
</div>

<router-view></router-view>

　　2.

四、我的常用stylus文件：　　

　　　　1）mixin.styl  （用来放置一些需传参的样式定义） 

// 媒体查询
bg-image($url)
  background-image: url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
    background-image: url($url + "@3x.png")

// 1px 底部border的实现    
border-1px($color)
  position: relative
  &:after
    display: block
    position: absolute
    left: 0
    bottom: 0
     100%
    border-top: 1px solid $color
    content: ' '
    
// 消除底部1px border的实现    
border-none()
  &:after
    display: none

　　　　2）base.styl （用来方式一些 html,body的基本样式，字体，公用类等等）

body, html
  line-height: 1
  font-weight: 200
  font-family: 'PingFang SC', 'STHitiSC-Light','Helvetica-Light',arial,sans-serif
  
.clearfix
  display: inline-block
  &:after
    display: block
    content: '.'
    height: 0
    line-height: 0
    clear: both
    visibility: hidden

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

　　　　3）iconfont.styl （用来装字体的 css文件，将原来.css文件中的大括号与分号去掉即可变为 .styl文件使用了）

　　　　　　……

　　　　n）index.styl （总引用文件）

　　引用时：在main.js 中引入index.styl(不然字体是不生效的，即使在需要使用字体的当前页 的 style 中引用也不行，会报错)：

　　 　　import './common/stylus/index.styl'

　　当在main.js中引用了以后，在单页使用 iconfont.styl 以及 base.styl 时，就可以不引入这两个了!!!!

例如，在base.styl中定义

　　.red

　　　　background: red;

　　那么在文件中使用时直接加类名即可，而不需要引入 base.styl了。

　　若果使用到了mixin.styl 中的文件就必须在style中引入：

　　　　@import "../../common/stylus/mixin.styl"

五、组件的创建与使用