vue-all

2023-08-27 10:40:16

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 单文件组件各个模块的加载

【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>

码农公寓

相关文章