vue-all

http://v1-cn.vuejs.org/guide/

【1】. vue-cli 【项目不完整，跳过】
https://github.com/vuejs/vue-cli vue-cli-master.zip

全局安装 vue-cli npm install -g vue-cli
C:\Users\Administrator\AppData\Roaming\npm\node_modules

npm 配置
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

【2】. vue-loader + webpack
https://github.com/vuejs-templates/webpack
官方的运行不了,看docs文档

创建自己的项目 myvue
my-webpack
vue init webpack#1.0 myvue -y // 默认都yes
cd myvue
npm install
npm run dev

【3】.标准 webpack 是一个模块打包工具。在开发中，它把一堆文件中每个都作为一个模块处理，找出它们间的依赖关系，并打包成待发布的静态资源
http://vuejs-templates.github.io/webpack/

【4】vue-loader vue-loader 是一个加载器，能把 Vue 单文件组件转化成JavaScript模块
http://vue-loader.vuejs.org/en/ 文档不全 针对*.vue 单文件组件各个模块的加载  

      <template lang='jade'></template>   <style lang='sass'></style> <script lang='coffee'></script>

 【5】vue-router 路由, this.$router.go()   https://github.com/vuejs/vue-router/tree/1.0  官方文档，只有lazy.md 应用到了，其他的都不一样

 【6】 vue-resource    https://github.com/pagekit/vue-resource/tree/master  ajax

【7】vuex

vuex store(仓库),包含state(状态) vue从store读取状态

改变store中state状态的方法 ，通过mutations(变更)

mutation里面定义的函数必须是同步函数，涉及到API调用的逻辑要放到Action进行，因为Action是可以定义异步函数的。

vue-cli + vuex

 npm install vuex@1.0.0 --save

app.vue

<template>
  <div id="app">
    <img class="logo" src="./assets/logo.png">
    <Display></Display>
    <Increment></Increment>
  </div>
</template>

<script>
  import Display from './components/Display'
  import Increment from './components/Increment'
  import store from './vuex/store'  // 根组件注入 store

  export default {
    components: {
      Display,
      Increment
    },
    store
  }
</script>

<style>
  html {
    height: 100%;
  }

  body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  #app {
    color: #2c3e50;
    margin-top: -100px;
    max-width: 600px;
    font-family: Source Sans Pro, Helvetica, sans-serif;
    text-align: center;
  }

  #app a {
    color: #42b983;
    text-decoration: none;
  }

  .logo {
    width: 100px;
    height: 100px
  }
</style>

Display.vue

<template>
  <h3>count is {{getCount}}</h3>
</template>

<script>
  import {getCount} from '../vuex/getters'
  export default{
    vuex: {
      getters: {
        getCount
      }
    }
  }
</script>

Increment.vue

<template>
  <button @click='incrementCounter'>Increment +1</button>
</template>

<script>
  import { incrementCounter } from '../vuex/actions'
  export default{
    vuex: {
      actions: {
        incrementCounter
      }
    }
  }
</script>

src/vuex/store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
  count: 0   // 放置初始状态
}

const mutations = {
  // 放置我们的状态变更函数
  INCREMENT (state, amount) {
    state.count = state.count + amount
  }
}

export default new Vuex.Store({
  state,
  mutations
})

src/vuex/actions.js

export const incrementCounter = function ({ dispatch, state }) {
  dispatch('INCREMENT', 1)     // action 使用dispatch调用 store中的mutations对象 
}

src/vuex/getters.js  

export const getCount = state => state.count   // 直接get  store中的state对象

 【8】.vux

vue cli + vux 界面

npm install vux@0.1.3 --save        // --save 生产环境需要用到的依赖

npm install less@2.7.1 --save-dev   // --save-dev 开发环境需要用到的依赖

npm install less-loader@2.2.3 --save-dev

main.js

require('./assets/vux.css')  // 复制 vux.css到assets文件夹下

xx.vue

 <x-button type="primary">btn</x-button>
components: {
      XButton: require('vux/src/components/x-button')
    }

 【9】 vue 基本依赖包     指定如下版本，不同版本的依赖包可能还会依赖其他依赖包

"devDependencies": {
    "babel-core": "^6.3.17",
    "babel-loader": "^6.2.0",
    "babel-plugin-transform-runtime": "^6.3.13",
    "babel-preset-es2015": "^6.3.13",
    "babel-runtime": "^5.8.34",
    "css-loader": "^0.23.0",
    "vue-hot-reload-api": "^1.2.2",
    "vue-html-loader": "^1.0.0",
    "vue-style-loader": "^1.0.0",
    "vue-loader": "^7.2.0",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "vue": "^1.0.13"
  }

 【10】 vue-cli + vue-router

npm install vue-router@0.7.13 --save-dev

App.vue

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

main.js

import Vue from 'vue'
import App from './App'
import Router from 'vue-router'
import VueResource from 'vue-resource'
Vue.use(Router)
Vue.use(VueResource)
const router = new Router()
router.map({
  '/hello': {
    component: require('./components/Hello')
  },
  '/second': {
    component: require('./components/Second')
  }
})
router.redirect({
  '*': '/hello'
})
router.start(App, '#app')

new Vue({
  el: 'body',
  components: {App}
})

index.html

    <div id="app"></div>

 

转载于:https://www.cnblogs.com/gyz418/p/6582812.html