[TOC]

@vue/cli

安装node
安装nrm npm install nrm -g
查看源 nrm ls
设置源 nrm use taobo
yarn 设置淘宝源 _yarn_ config set registry https://registry.npm._taobao_.org/

清理旧版本vue/cli

npm uninstall @vue/cli -g
yarn global remove @vue/cli

安装vue/cli

npm install @vue/cli -g
# OR
yarn global add @vue/cli

# 查看版本
vue --version

创建项目

vue create demo

VSCode安装插件 Vetur, 显示语法提示

vue-router

官方文档
在用@vue/cli创建项目时选择vue-router安装，也可以创建项目后额外安装

异步加载组件, 可以减少加载首页时的开销

{
  path: '/about,
  name: 'About',
  component: () => import('../components/About.vue')
}

Vuex

官方文档
创建项目时选择VueX, 或者创建项目后额外安装
用store创建全局变量

import { createStore } from 'vuex'

export default createStore({
  state: {
    msg: 'hello'
  },
})

使用全局变量

<template>
  <div>{{msg}}</div>
</template>

<script>

  export default {
    computed: {
      msg(){
        return this.$store.state.msg
      }
    }
  }
</script>

mutations和actions

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

组件中用this.$store.commit触发mutations, 执行同步操作
用this.$store.dispatch分发actions，执行异步操作

composition API
通过useStore获取store

import { useStore } from 'vuex'

export default {
  setup () {
    const store = useStore()

    return {
      // 使用 mutation
      increment: () => store.commit('increment'),

      // 使用 action
      asyncIncrement: () => store.dispatch('asyncIncrement')
    }
  }
}

vue3新特性