Entrypoint main = maxzhao_bundle.js
[0] ./maxzhao1.js 42 bytes {0} [built]
[1] ./maxzhao2.js 46 bytes {0} [built]

webpack   Hash: 4fdefac099a5f36ff74b Version: webpack 1.12.13 Time: 576ms     Asset     Size  Chunks             Chunk Names bundle.js  11.8 kB       0  [emitted]  main    [0] ./runoob1.js 65 bytes {0} [built]    [5] ./runoob2.js 46 bytes {0} [built]     + 4 hidden modules

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: resolve => require(['@/components/HelloWorld'], resolve)
    }
  ]
})

npm install sass-loader node-sass --save-dev

<style scoped lang='scss'>
    $t-base:#32ba90;
    .wrap{
        color: $t-base;
    }
</style>

$SCALE: 10;
$BASE: 375 / $SCALE;//375为设计图尺寸

// 超过显示省略号
@mixin ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
//多行文本，超过显示省略号
@mixin moreLine($num){
    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: $num; /** 显示的行数 **/
    overflow: hidden;  /** 隐藏超出的内容 **/
}

@function rem ($px) {
  @return ($px / $BASE) + rem
}

@import './mixin.scss';

$size_small:rem(12);
$size_middle:rem(14);
$size_default:rem(16);
$size_big:rem(18);
$text_color: #666;
$bg_color: #32ba90;
$border_color: #dedede;

body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4,h5, h6, i, b, em,textarea, button, input, select, figure, figcaption {
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
    border: none;
    font-weight: normal;
    font-family: PingFangSC-Light,helvetica,'Heiti SC';
    box-sizing: border-box;
    font-size: 14px;
    -webkit-tap-highlight-color:transparent;
    -webkit-font-smoothing: antialiased;
    &:hover{
        outline: none;
    }
}
a, a:visited {
    text-decoration: none;
    color: #333;
}
input:focus {
    outline: none;
    border: none;
}
html, body {
  width: 100%;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  background: #fff;
  color: #333;  
  padding: 0;
  margin: 0;
}
// 禁止用户选中
body{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
::-webkit-scrollbar {
    display: none;
}

.fl{
    float: left;
}
.fr{
    float: right;
}
.clearfix:after{  /*最简方式*/
    content: '';
    display: block;
    clear: both;
}
.clearfix{ /*兼容 IE*/
    zoom: 1;
}

<script>
import {mapGetters,mapActions} from 'vuex'
export default {
  name: 'App',
  mounted () {
      // 设置html的font-size
      document.addEventListener('DOMContentLoaded', function () {
        const html = document.querySelector('html');
        html.style.fontSize = window.innerWidth / 10 + 'px';
      });
    }
}
</script>

<style scoped lang='scss'>
 @import '../styles/reset.scss';
  /*可使用mixin和reset中的变量及方法*/
</style>

npm install axios --save

import axios from 'axios';
var qs = require('qs');


if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL =  ''; //''里面填写请求域名
}

import VueRouter from 'vue-router';


//get请求方式
export const home = () => {
  return axios.get('/api/index');
}
//post请求方式(包含参数)
export const article = (id)=>{
    const params = qs.stringify({'id':id});
    return axios.post('/api/article', params);
}

<script>
    import {home} from '@/api';//引入

    export default {
      data () {
        return {
        }
    },
   mounted () {
      const self = this;
      home().then(r => {//调用接口
        let res = r.data;
        console.log(res)
      });
    },
}
</script>

<template>
    <div v-if="showToast" class="toast" >
      <p>{{ toastTitle }}</p>
    </div>
</template>

<script>
export default {
  data: () => ({
    showToast: false,
    toastTitle: '',
  }),

  methods: {
    show (params) {
        this.toastTitle = params;
        this.showToast = true
    },

  },
  watch: {
    toastTitle: function(val) {
        if (val) {
          this.showToast = true;
          setTimeout(() => {
            this.showToast = false;
            this.toastTitle='';
          }, 2000)
        }
        return val;
      }
  }
}
</script>

<style scoped lang='scss'>
@import '../../styles/mixin.scss';

.toast {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(49, 49, 49, 0.8);
  color: #fff;
  border-radius: rem(5);
  z-index: 999;
  text-align: center;
  font-size: rem(14);
  p{
    margin: 0;
    padding: rem(4) rem(10);

  }
}
</style>

import Toast from './index'

export default {
  install (Vue, options = {}) {
    const VueToast = Vue.extend(Toast)
    let toast = null

    function $toast (params) {
      return new Promise(resolve => {
        if (!toast) {
          toast = new VueToast()
          toast.$mount()
          document.querySelector(options.container || 'body').appendChild(toast.$el)
        }
        toast.show(params)
        resolve()
      })
    }

    Vue.prototype.$toast = $toast
  }
}

//toast
import toast from './components/toast/plugin'
Vue.use(toast)

<template>
  <div class="wrap">
    <button class="btn" @click="showToast">show toast</button>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  methods: {
    showToast () {
     this.$toast('toast')
    }
  }
}
</script>

dependencies
 装载：npm install vue  --save-prod
 卸载：npm uninstall vue  --prod
devDependencies
 装载：npm install vue  --save-dev
 卸载：npm uninstall vue  --dev
 
-P 相当于 --save-prod， 添加dependencies 里面所有的包。在 -D -O 不存在时，-P 就是默认值 。 也可以写全称： --save-production
-S 相当于 --save; 添加dependencies 里面所有的包。
-D 相当于 --save-dev; 添加devDependencies 里面所有的包，
-O 相当于 --save-optional, 添加在 optionalDependencies 里面的包，
--no-save： 阻止保存记录在dependencies 中。