安装 跟视频一样，不想看视频的看这里咯
官网下载安装node.js，安装node.js会自动安装npm（或者在npm官网install npm）,可在命令行输入npm -v检查是否安装；（在vue.js的官网教程安装的注释中有给出npm国内镜像可提高安装速度)
在命令行输入npm install vue；
接着是命令行工具，截了一个视频的图
上述命令新建了my-project项目，新建过程中会提示输入一些诸如项目名称、描述等，命令npm run dev运行项目，终端提示：Your application is running here: http://localhost:8080，将给出的网址复制到浏览器打开即可。
关于vue的介绍，核心就是组件渲染，简单来说就是用最简洁的模版语法进行数据渲染。以下是官网的一个例子：
|
<div id="app"> {{ message }} </div> |
|
var app = new Vue({ el: ‘#app‘, data: { message: ‘Hello Vue!‘ } }) |
<template/>中（上面的）对应html，<script/>（下面的）对应javascript，<style/>对应css，前面命令中的webpack是一个插件，可以理解为将vue文件解析为上述三种形式文件。
视频中的to-do-list
按照视频一步步做就好了，没出现大的问题。期间一直报这个错：
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
解决参看https://vue-loader.vuejs.org/migrating.html#a-plugin-is-now-required，
webpack.config.js 即为webpack.base.conf.js文件！（可能就我不知道…不过我后来新建的项目并没有报这个错，迷啊…
Demo 6 Todolist(Vuex实现）
使用之前先安装vuex,安装命令：npm install --save vuex。
and 请确保在开头调用了 Vue.use(Vuex)，还有import一下：
import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)
关于对vuex的理解，官网说法，每一个 Vuex 应用的核心就是 store（仓库），“store”基本上就是一个容器，它包含着你的应用中大部分的状态（state）。
vuex的核心概念：
state：状态，相当于数据库的数据。用一个对象就包含了全部的应用层级状态，每个应用将仅仅包含一个 store 实例。
getter：取得状态。
mutation：改变状态，不能直接改变 store 中的状态，改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation，这样的好处是我们可以方便地跟踪每一个状态的变化。
Action 的理解其实类似mutation，它提交的是 mutation，而不是直接变更状态，其中还包含一些同步异步的说法还没明白，先看下代码理解下吧。
看了博客之后自己写了一下，把核心内容都写在store.js里了，代码如下：
store.js
import Vue from ‘vue‘ import Vuex from ‘vuex‘ Vue.use(Vuex) const store = new Vuex.Store({ state:{ todoItems:[] }, getters:{ todoItems: (state) => { return state.todoItems } }, mutations:{ setTodoitems(state,todoItems){ state.todoItems=todoItems } }, actions:{ setTodoitems({commit},todoItems){ commit(‘setTodoitems‘,todoItems) } } }) export default store
App.vue
1 <template> 2 <div id="todo-app"> 3 <h3>This is a to do list applying vuex.</h3> 4 <input v-model="newItem" 5 v-on:keyup.enter="addNewItem"/> 6 <ol> 7 <li v-for="item in items" 8 @click="toggleFinnshed(item)" 9 @dblclick="deleteItem(item)" 10 :class="[{finished:item.isFinished},{unfinished:!item.isFinished}]" 11 > 12 {{item.name}} 13 </li> 14 </ol> 15 </div> 16 </template> 17 18 <script> 19 import store from ‘./vuex/store.js‘ 20 21 Array.prototype.remove = function(val){ 22 var index = this.indexOf(val); 23 if (index > -1) { 24 this.splice(index, 1); 25 } 26 } 27 28 export default { 29 name: ‘App‘, 30 data:function(){ 31 return{ 32 items:store.getters.todoItems, 33 newItem:‘‘, 34 } 35 }, 36 37 methods:{ 38 addNewItem:function(){ 39 this.items.push({ 40 name:this.newItem, 41 isFinished:false, 42 }), 43 this.newItem=‘‘ 44 }, 45 toggleFinnshed:function(item){ 46 if(item.isFinished) 47 item.isFinished=false; 48 else 49 item.isFinished=true; 50 }, 51 deleteItem:function(item){ 52 this.items.remove(item) 53 } 54 }, 55 56 watch:{ 57 items : { 58 handler:function (items) { 59 store.dispatch("setTodoitems",items); 60 }, 61 deep:true 62 } 63 } 64 } 65 </script> 66 67 <style> 68 #todo-app{ 69 font-family: ‘Avenir‘, Helvetica, Arial, sans-serif; 70 -webkit-font-smoothing: antialiased; //抗锯齿 71 -moz-osx-font-smoothing: grayscale; 72 text-align: center; 73 color: #2c3e50; 74 margin-top: 60px; 75 } 76 77 ol li{ 78 line-height: 30px; 79 } 80 .finished{ 81 color: darkgreen; 82 text-decoration:line-through 83 } 84 .unfinished{ 85 color: darkred; 86 text-decoration:underline 87 } 88 </style>
原文：https://www.cnblogs.com/by13521/p/9757107.html