vue基础

常用插件

vue-cli

快速构建vue项目的脚手架工具

安装并构建项目
1. npm install -g vue-cli
2. 选择webpack模板搭建vue项目：vue init webpack cartool
3.启动项目
进入cartool目录，执行npm run dev 通过localhost:8080访问，用webstorm打开项目进行开发

webpack

WebPack可以看做是模块打包机，通过分析项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用；
Webpack的工作方式是：把项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

npm

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题。

• 判断是否安装成功

npm -v

• 使用 npm 命令安装模块

$ npm install 

vue-router

提供路由支持

vuex

Vuex的核心是一个全局store，其为一个容器，包含着应用中大部分的状态(state)。在Vue中，多组件的开发给我们带来了很多的方便，但同时当项目规模变大的时候，多个组件间的数据通信和状态管理就显得难以维护。而Vuex就此应运而生。将状态管理单独拎出来，应用统一的方式进行处理，在后期维护的过程中数据的修改和维护就变得简单而清晰了

• Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
• 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交(commit) mutations。

state

Vuex 使用单一状态树 —— 用一个对象就包含了全部的应用层级状态，每个应用将仅仅包含一个 store 实例。

this.$store.state.count

继承mixin

// A.js
export default {
  props: {
    items: []
  }
  data(){
    return { selectedItem: null};
  }
  ...
}

//B.vue
import A from '.A';

export default {
  name: 'B',
  mixins: [A ]
}

//C.vue
import A from '.A';

export default {
  name: 'C',
  mixins: [A ]
}

vue-axios

npm install axios
npm install --save axios vue-axios

配置模板

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
 
Vue.use(VueAxios, axios)

父子组件

• 父组件通过props属性向子组件传递数据
• 子组件通过事件emit给父组件发送消息。