1.创建项目 -脚手架快速构建

//注：cli前全局安装 webpack与vue
npm install webpack -g webpack -v;
vue-cli vue -V
//执行
vue init webpack vue_demo

2.配置sass ,以及全局引入sass变量

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

//在 build 文件夹下找到 util.js 修改sass编译器loader的配置
function resolveResource(name) {
    return path.resolve(__dirname, '../src/style/' + name);
}
function generateSassResourceLoader() {
   var loaders = [
        cssLoader,
        'sass-loader',
        {
            loader: 'sass-resources-loader',
            options: {
                resources: [resolveResource('common.scss')] 
            }
        }
    ];
    if (options.extract) {
        return ExtractTextPlugin.extract({
            use: loaders,
            fallback: 'vue-style-loader'
        })
    } else {
        return ['vue-style-loader'].concat(loaders)
    }
}


//修改sass配置的调用为 generateSassResourceLoader()
sass: generateSassResourceLoader(),
scss: generateSassResourceLoader(),

//在 main.js 中全局引用 common.scss 文件，重启服务
import './style/common.scss'

//局部页面引用：
<style lang="scss" scoped></style>

3.配置axios

npm install --save axios
npm install --save qs
//main.js引用
import axios from 'axios'
Vue.prototype.$axios= axios
axios.defaults.baseURL = 'http://47.94.216.215'
//请求头拦截配置
axios.interceptors.request.use((config) => {
  if(localStorage.token != undefined){
    config.headers['token'] = localStorage.token;
  }
  return config;
}, (error) => {
  return Promise.reject(error);
});
//响应状态拦截
axios.interceptors.response.use((response) => {
  console.log("请求成功" + response.data.code)
  return response;
}, (error) => {
  console.log("出现跨域问题，不返回状态")
  console.log(error);
  return Promise.reject(error);
});

import qs from 'qs'
Vue.prototype.$qs = qs

this.$axios.post(url, 
    this.$qs.stringify({
        mobile: '15210919778',
        password: '111111',
    })
).then(function (response) {

});

4.配置ydui ui框架

npm install vue-ydui --save

//如果需要使用rem单位,则需在html页面引入ydui.flexible.js，按需引入单个组件，另需导入重置基础样式（其未包含任何组件样式），即在入口文件 main.js 中如下配置：
//main.js   
import 'vue-ydui/dist/ydui.rem.css';
import 'vue-ydui/dist/ydui.base.css';
//index.html
<script src="//unpkg.com/vue-ydui/dist/ydui.flexible.js"></script>
//全局引入
import { Confirm, Alert, Toast, Notify, Loading } from 'vue-ydui/dist/lib.rem/dialog';
Vue.prototype.$dialog = {
    confirm: Confirm,
    alert: Alert,
    toast: Toast,
    notify: Notify,
    loading: Loading,
};
//按需引入
import {Button, ButtonGroup} from 'vue-ydui/dist/lib.rem/button';
import {InfiniteScroll} from 'vue-ydui/dist/lib.rem/infinitescroll';
import {ListTheme, ListItem, ListOther} from 'vue-ydui/dist/lib.rem/list';

Vue.component(ListTheme.name, ListTheme);
Vue.component(ListItem.name, ListItem);
Vue.component(ListOther.name, ListOther);
Vue.component(Button.name, Button);
Vue.component(ButtonGroup.name, ButtonGroup);
Vue.component(InfiniteScroll.name, InfiniteScroll);

5.配置ui框架 vux

npm install --save vux
npm install vux-loader --save-dev
const vuxLoader = require('vux-loader')

6. npm 发布 自己的包（详情）

    vue init webpack-simple packname;
    //src创建一个文件夹lib ,放各个.vue组件；
    //.vue编写各个组件
    export default {
        name:'chanyeyunFooter',
    }
    //src创建一个文件index.js 作为入口文件；
    //index.js
    import chanyeyunHeader from './lib/chanyeyun-header.vue'
    import chanyeyunFooter from './lib/chanyeyun-footer.vue'
    const chanyeyun = {
         install(Vue,options){
              Vue.component(chanyeyunHeader.name,chanyeyunHeader);
              Vue.component(chanyeyunFooter.name,chanyeyunFooter);
         }
    }

    if (typeof window !== 'undefined' && window.Vue) { 
        window.Vue.use(chanyeyun) 
    }
    export default chanyeyun

    //模拟引入 查看效果
    import chanyeyunUi from './index.js' 
    Vue.use(chanyeyunUi)

    //webpack模拟
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },

    //npm  run build 前修改 webpack.config.js，入口文件修改为index.js
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'vue-chanyeyun.js',   //打包生成文件的名字
        library:'Chanyeyun',    //reqire引入的名字
        libraryTarget:'umd',
        umdNamedDefine:true
    },

    //上传包之前修改package.json 文件
    "name": "chanyeyun-ui",   //包名
    "main": "dist/vue-chanyeyun.js",   //dist打包后地址
    "private": false,
    "repository": { 
        "type": "git",
        "url": "http://116.196.109.204/nana/chanyeyun-ui.git"     //git仓库地址
    },

 
   //  npm账号登录cmd
   npm login 
   baina   *nana*523862!    495964946@qq.com

    // npm发布
    npm publish .  
   
    //使用安装  npm install chanyeyun-ui --save   （包名）
    //main.js引用    
    import chanyeyunUi from 'chanyeyun-ui' 
    Vue.use(chanyeyunUi)

   //页面使用
   <chanyeyun-footer></chanyeyun-footer>

7.fastclick ，处理移动端click事件300毫秒延迟

npm install fastclick -S
//main.js引用
import FastClick from 'fastclick'
FastClick.attach(document.body);

8.vue-lazyload 图片懒加载处理

npm install vue-lazyload --save-dev
//main.js引用
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload,{
      error:'./static/error.png',
      loading:'./static/loading.jpg'
})
//使用
<img    v-lazy="item.img">

9.vue-clipboards 复制功能

npm install vue-clipboards --save 
//main.js引用
import VueClipboards from 'vue-clipboards';
Vue.use(VueClipboards);
//使用copyData复制的data数据，handleSuccess复制成功函数，handleError复制失败函数
<button v-clipboard="copyData" @success="handleSuccess" @error="handleError">复制</button>

10 vue压缩上传图片lrz

npm install --save lrz

<template>
    <div>
        <h5 class="content-header"> </h5>
        <div class="image-list">
            <div style="text-align:center" ref="divGenres" class="list-default-img" v-show="isPhoto" @click.stop="addPic">
                <img src="../images/add.jpg"> 
                <input type="file" accept="image/jpg,image/png,image/jpeg,image/gif" capture="camera" @change="onFileChange" style="display: none;">
            </div>
            <ul class="list-ul" v-show="!isPhoto">
                <li class="list-li " v-for="(iu, index) in imgUrls">
                    <a class="list-link" @click='previewImage(iu)'>
                        <img :src="iu">
                    </a>
                    <span class="list-img-close" @click='delImage(index)'></span>
                </li>
            </ul>
        </div>
        <div class="add-preview" v-show="isPreview" @click.self="closePreview">
            <img :src="previewImg">
        </div>
        <div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
    </div>
</template>
<script>
    import lrz from "lrz"
    export default {
        data: function () {
            return {
                show: false,
                imgUrls: [],
                urlArr: [],
                isPhoto: true,
                btnTitle: '',
                isModify: false,
                previewImg: '',
                isPreview: false,
                lat:0,
                lng:0,
            }
        },
        watch: {
            imgUrls: 'toggleAddPic'
        },
        methods: {
            toggleAddPic: function () {
                let vm = this;
                if (vm.imgUrls.length >= 1) {
                    vm.isPhoto = false;
                } else {
                    vm.isPhoto = true;
                }
            },
            addPic: function (e) {
                let els = this.$refs.divGenres.querySelectorAll('input[type=file]')
                    els[0].click()
                return false
            },
            //选择图片
            onFileChange: function (e) {
                var files = e.target.files || e.dataTransfer.files;
                if (!files.length) return;
                this.createImage(files, e);
            },
            //图片压缩转为base64;
            createImage: function (file, e) {
                let vm = this;
                lrz(file[0], {
                    width: 480
                }).then(function (rst) {
                    vm.imgUrls.push(rst.base64);

                    let urlArr = [],
                    imgUrls = vm.imgUrls;
        
                    for (let i = 0; i < imgUrls.length; i++) {
                        if (imgUrls[i].indexOf('file') == -1) {
                            urlArr.push(imgUrls[i].split(',')[1]);
                        } else {
                            urlArr.push(imgUrls[i]);
                        }
                    }
                    console.log(urlArr.length);
                    console.log(urlArr[0]);
                }).always(function () {
                    // 清空文件上传控件的值
                    e.target.value = null;
                });
            },
            delImage: function (index) {
                let vm = this;
                vm.imgUrls.splice(index, 1);
            },
            previewImage: function (url) {
                let vm = this;
                vm.isPreview = true;
                vm.previewImg = url;
            },
            closePreview: function () {
                let vm = this;
                vm.isPreview = false;
                vm.previewImg = "";
            }
        
        }
    }
</script>
<style>
    .list-default-img{
        padding:0 20px;
    }
    .list-default-img img{
        width: 100%;
        height:200px;
    }

    .list-ul{
        padding: 0 20px;
    }
    .list-li {
        width: 100%;
        height:200px;
        position: relative;
    }
    .list-link img {
        width: 100%;
        height: 100%;
    }
    .list-img-close {
        background: #ffffff url(../images/del.jpg) no-repeat right top;
        border-color: #ff4a00;
        background-position: center;
        background-size: 35px 35px;
        display: block;
        float: left;
        width: 10px;
        height: 10px;
        position: absolute;
        top: 0;
        right: 0%;
        margin-top: 0px;
        margin-left: 0px;
        padding: 8px;
        z-index: 5;
        border-radius: 5px;
        text-align: center;
    }
    .add-img {
        display: block;
        background-image: url('../images/add.jpg');
        background-repeat: no-repeat;
        width: 100px;
        height: 100px;
        background-position: center;
        background-size: 100px 100px;
    }
    .add-preview{
        position: absolute;
        top:0;
        left:0;
        background-color: rgba(0,0,0,0.8);
        z-index:5;
        width: 100%;
        height: 100%;
        padding:0 20px;
    }
    .add-preview img{
        width: 100%;
        position: relative;
        top:50%;
        left:50%;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }
</style>

11获取当前位置信息,腾讯地图

<iframe id="geoPage" width=0 height=0 frameborder=0  style="display:none;" scrolling="no" src="https://apis.map.qq.com/tools/geolocation?key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp">
</iframe>
mounted(){
    this.Tmap()
},
Tmap() {
     window.addEventListener('message', function(event) {
      var loc = event.data;
      this.lat = loc.lat;
      this.lng = loc.lng;
      console.log(this.lat);
      console.log(this.lng);
}, false);  

12.父组件给子组件传值

//父组件
import Icon from '../components/XXX.vue'
components:{
    Icon,
},
<Icon  color = 'red' ></Icon>   //父组件定义 子组件接收值并传值 
 //子组件
props:{
    color:String,
    default: '#409eff'
} 

13.子组件给父组件传值

//子组件向上抛出一个事件
this.$emit('success', 值)；
//父组件
<Icon  color = 'red'  @success="getIcon"></Icon>
 getIcon(icon){
     this.icon = icon;
     console.log(this.icon);
}

14.父组件调用子组件方法

父组件：

setTimeout(function(){
    this.$refs.customer.typeChange();   //子组件方法
},1000)

15.vue dom属性变量拼接

:session-from="'sobot|['+userInfo.nickName+']|['+userInfo.avatarUrl+']|['+params+']|transferAction=['+transferAction+']'"