vue-all

Posted 2020-09-05 gyz418

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-demo 项目

cd vue-demo
npm install
npm run order

vuex数据流模型
用户在组件中的输入操作触发 action 调用；
Actions 通过分发 mutations 来修改 store 实例的状态；
Store 实例的状态变化反过来又通过 getters 被组件获知，组件获悉状态变更之后就是数据驱动的魔法——实时更新DOM状态。
需要注意的一点是，mutation本身是一个事件系统，通过定义事件来触发Store的状态变更。mutation里面定义的函数必须是同步函数，涉及到API调用的逻辑要放到Action进行，因为Action是可以定义异步函数的。

vuex

vuex的核心是 store(仓库) ,store 包含大部分的 状态 state vuex的状态存储是响应式的。
改变store中状态的唯一途径是显式地分布【状态变更事件】explicitly dispatching mutations

最简 vuex store
提供 初始化state 对象和mutation

【store.js】
import Vue from ‘vue‘
import Vuex from ‘vuex‘

// 告诉 vue “使用” vuex
Vue.use(Vuex)

// 创建一个对象来保存应用启动时的初始状态
const state = {
// TODO: 放置初始状态
}

// 创建一个对象存储一系列我们接下来要写的 mutation 函数
const mutations = {
// TODO: 放置我们的状态变更函数
}

// 整合初始状态和变更函数，我们就得到了我们所需的 store
// 至此，这个 store 就可以连接到我们的应用中
export default new Vuex.Store({
state,
mutations
})
-->> 项目中，使用 ./modules/auth.js 来辅助 store.js

action 是一种专门用来被 component 调用的函数。action 函数能够通过分发相应的 mutation 函数，来触发对 store 的更新。action 也可以先从 HTTP 后端或 store 中读取其他数据之后再分发更新事件。

// action 会收到 store 作为它的第一个参数
// 既然我们只对事件的分发（dispatch 对象）感兴趣。（state 也可以作为可选项放入）
// 我们可以利用 ES6 的解构（destructuring）功能来简化对参数的导入
【action.js】
export const incrementCounter = function ({ dispatch, state }) {
dispatch(‘INCREMENT‘, 1)
}
-->> 项目中，使用mutations-types.js 来辅助 action.js

生成 package.json 文件
npm init -y

添加对应依赖
"dependencies": {
"vuex": "^0.6.3"
}
或者npm install vuex --save