-------------搭建项目-----------------------------------------------------------------------
npm install --global vue-cli
vue init webpack my-project

-------------引入jquery-----------------------------------------------------------------------
npm install jquery --save-dev
在webpack.base.conf.js里配置
    var webpack=require('webpack')methos
    plugins: [ 
           new webpack.ProvidePlugin({ 
                 $:"jquery", 
                 jQuery:"jquery", 
                "windows.jQuery":"jquery"
        }) 
在main.js中输入
import $ from 'jquery'

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

在build文件夹下的webpack.base.conf.js的rules里面添加配置
{
  test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
}

<style lang="scss">

-----------路由跳转-----------------------------------------------------------------------
<router-link to="/index">index</router-link> 
<router-link :to="{path:'/test/1',query:{name:'child'}}">index</router-link>
<router-link :to="..." replace>replace</router-link>

this.$router.push({path: '/login?url=' + this.$route.path});
this.$router.push({path: '/backend/order', query: {selected: "2"}});
this.$router.replace(...)

获取值
{{this.$route.params.id}}
{{this.$route.query.name}}

-------------methods和computed和watch--------------------------------------------------------
methods:{
    函数声明...
}

watch:一个数据影响多个数据
watch: {
  name1: function(val){
      this.yourName = val + '-'+ this.name2+'-'+this.name3      
  }
}
this.name1='ddd';
console.log(this.yourName)

computed:一个数据受多个数据影响
computed:{
    yourName2: function(){      
      return this.name1 + '-'+ this.name2+'-'+this.name3      
    }
}
this.name1='ddw';
this.name2='wwge';
{{ this.yourName2 }} 

-------------父子组件传值--------------------------------------------------------------------------
使用props向子组件传递数据
props:['logo'] 从父组件获取数据

子组件主要通过事件传递数据给父组件
子组件：
<input v-model="username" @change="setUser" />
methods:{
    setUser: function(){
        this.$emit('transferUser',this.username)
    }
}
'transferUser'是一个自定义的事件，功能类似于一个中转。

父组件：
<header @transferUser="getUser"></header>
methods:{
    getUser(msg){
        this.user = msg
    }
}
msg就是从子组件传递过来的参数username

-------------同级组件传值--------------------------------------------------------------------------
man.js 
window.eventBus = new Vue();

header.vue 传值
eventBus.$emit('eventBusName','helloKugou'); 

footer.vue 接值
created() {
    eventBus.$on('eventBusName',function(val){
        console.log(val);
    })
}

------vuex----- ( http://www.imooc.com/article/14741  [什么是mapState])
npm install --save vuex
npm install babel-polyfill --save-dev（https://blog.csdn.net/bright2017/article/details/77850525）

创建一个store.js（https://blog.csdn.net/h5_queenstyle12/article/details/75386359）
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)

const state = {
     count:1
}
const mutations={
        add(state){
            state.count+=1;
        },
        reduce(state){
            state.count-=1;
        }
}
export default new Vuex.Store({
     state
});

使用{{$store.state.count}}

---------------ajax------------------------------------------------------------------------------
fetch.js fetch是基于Promise的,未来的趋势。
https://github.com/github/fetch

axios.js Vue 2.0 官方推荐。
https://github.com/axios/axios

解决跨域问题（https://www.cnblogs.com/wangyongcun/p/7665687.html / https://segmentfault.com/a/1190000011007043）
打开config/index.js,在proxyTable中添写如下代码：
proxyTable: { 
  '/api': {  //使用"/api"来代替"http://f.apiplus.c" 
    target: 'http://f.apiplus.cn', //源地址 
    changeOrigin: true, //改变源 
    pathRewrite: { 
      '^/api': 'http://f.apiplus.cn' //路径重写 
      } 
  } 
}

使用axios请求数据时直接使用“/api”

----------------中英文切换------------------------------------------------------------------------
npm install vue-i18n

language.js ( https://segmentfault.com/a/1190000011782935 )--------------
import VueI18n from 'vue-i18n'
import Vue from 'vue'

Vue.use(VueI18n)

const i18n = new VueI18n({
    locale: 'cn',    // 语言标识
    messages: {
        'cn': require('./lang/cn'),   // 中文语言包
        'en': require('./lang/en')    // 英文语言包
    },
})
export default  i18n

main.js
import i18n from './i18n'
new Vue({
  el: '#app',
  router,
  store,
    i18n: i18n,
  render: h => h(App)
})

改变中英文 已经显示
this.$i18n.locale = val;
{{ $t("message.index") }}

————————————————————————————————————
一般导出一个属性或者对象用 export default 
一般导出模块或者说文件使用 module.exports

---------------表单验证----------------------------------------------------------------------
https://monterail.github.io/vuelidate/#examples

main.js
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

--------------打包---------------------------------------------------------------------------
config/index.js里的assetsPublicPath改成'./'

--------------filter-------------------------------------------------------------------------
1.组件中定义
filters: {
  capitalize: function (value) {
    return ...
  }
}
2.全局定义过滤器 main.js
Vue.filter('capitalize', function (value) {
  return ...
}

--------------tab切换-------------------------------------------------------------------------
<button v-on:click="tabFun('simple01')">备选一</button>
<button v-on:click="tabFun('simple02')">备选二</button>
<div style="margin:20px 0"></div>
<keep-alive> //缓存数据  
    <component v-bind:is="tabView"></component> //切换模块
</keep-alive> 
-------------------------------------
import simple01 from './simple01.vue'
import simple02 from './simple02.vue'
export default {
        name: 'Test2',
        data() {
            return {
                tabView: 'simple01'
            }
        },
        methods: {
            tabFun(value) {
                this.tabView = value;                
            }
        },
        components: {
            simple01,
            simple02
        }
}

--------------递归组件---------------------------------------------------------------------------
https://blog.csdn.net/badmoonc/article/details/80380557

子组件
<ul>         
    <li  v-for="item in tree" :key="item.label">
        <p>{{item.label}}</p>   
        <Simple01 v-if="item.children" :tree="item.children"></Simple01>            
    </li>
</ul>
props: ['tree']

父组件
<simple01 :tree="tree"></simple01>
data() {
        return {
                tabView: 'simple01',
                tree:[{
                    label:'A1-1',
                    children: [{
                        label: 'B1-1',
                        children: [{
                            label:'C1-1'
                        }]
                    }]
                    },{
                    label:'A2-1',
                    children: [{
                        label: 'B2-1',
                        children: [{
                            label:'C2-1'
                        }]
                    }]
                }]
        }
}