vue3.0

需先安装nodejs，再安装vue脚手架。
安装vue-cli3
cnpm install --g @vue/cli
创建项目
vue create my-project

对比vue2.0少了build，config文件夹
可在根目录下创建vue.config.js进行相关配置

component创建

props/$emit
$children/$parent
$emit/$on
$attrs/listeners

Parent.vue
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
	<h5>{{msg}}</h5>
    <m-child v-bind:msg="'from parent'" @showMsg="showMsg" ref="child"></m-child>
  </div>
</template>

<script>
// @ is an alias to /src
import MChild from "./Son"
import bus from "../util/bus.js"

export default {
  data(){
    return {
	  msg:'test'
	}
  },
  name: 'MParent',
  components:{MChild},
  methods:{
    showMsg(val){
	  this.msg=val
	}
  },
  mounted(){
    bus.$on('msg',(val)=>{
	  this.msg=val
	})
    console.log(this.$children)
	console.log(this.$refs.child)
  }
}
</script>

Son.vue
<template>
  <div class="home">
    <h5>{{msg}}</h5>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'Son',
  props:{
     msg:{
	   type: String,
	   default: 'test'
	 }
  }
}
</script>
<style>

</style>

bus.js
import Vue from 'vue'

export default new Vue;

router需要配置 App.vue

import Vue from 'vue'
import VueRouter from 'vue-router'
1. import MParent from '../views/Parent.vue'   /* 进入页面需加载 */

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: MParent,
    children:[{        /* 嵌套路由 */
		path:'/child',
		component:()=> import('../views/Son')
	}]
  },
  {
    5. path: '/son:id', /*动态路由 */
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    2. component: () => import('../views/Son.vue')   /* 懒加载 */
  }
]

const router = new VueRouter({
  routes
})

export default router

3. <router-link to="/son">ss</router-link>
4. toSon(){
	    this.$router.push({path:'/son'，query:{'name':'张三'}})
	     this.$router.push({name:'Son'，params:{'name':'张三'}})

	 }
7. 路由守卫
router.beforeEach((to,from,next)=>{
	console.log(to.path);
	next();
})

router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Hello from '../components/Hello'
import HelloWorld from '../components/HelloWorld'

Vue.use(VueRouter)
const routes=[
    {
        path:'/hello',
        component:Hello
    },
    {
        path:'/helloworld',
        component:HelloWorld
    }
]
export default new VueRouter({
    routes
})

App.vue
<template>
  <div id="app">
    <router-view />
  </div>
</template>

vuex状态管理，store/index.js。通过actions, mutations 改变名字， 这就涉及到dispatch action, commit mutations, mutations 改变state.单向流程。

store.js
import Vue from 'vue'
import  Vuex from 'vuex'

Vue.use(Vuex)

const state={
    count:0
}

const mutations={
   increment(state,data){
       console.log(data)
       state.count++
   }
}

const actions={
    increment({commit}){
        commit('increment',3)
    },
    incrementIfOdd({commit,state}){
        if(state.count%2==0){
            commit('increment',4)
        }
    },
}

const getters={
    evenOrOdd(state){
        return state.count%2==0?'偶数':'奇数'
    }
}
export default new Vuex.Store(
    {
        state,
        mutations,
        actions,
        getters
    }
)

main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
    store  //所有的组件对象都多了$store
}).$mount('#app')

组件中使用
<script>
import HelloWorld from './components/HelloWorld.vue'
import {mapState,mapGetters,mapActions} from 'vuex'

//import PubSub from 'pubsub-js'

export default {
  name: 'App',
  methods:{
      reverseMessage:function () {
          this.seen=false;
          this.message = this.message.split('').reverse().join('')
      },
      ...mapActions(['increment'])
      /*increment:function () {
          this.$store.dispatch('increment')

      }*/
  },
    computed:{
        ...mapGetters(['evenOrOdd']),
        /*evenOrOdd(){
            return this.$store.getters.evenOrOdd
        },*/
            ...mapState({counts:'count'}),
        /*count(){
            return this.$store.state.count
        }*/

    }
}
</script>
</script>

Element-UI https://element.eleme.cn/#/zh-CN
安装
cnpm install -g yarn
yarn add element-ui -S

项目搭建及技术选型
vue create project-name