1-1 Vue的介绍

简单介绍Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

安装淘宝npm（cnpm）

npm install -g cnpm --registry=https://registry.npm.taobao.org

一、vue-loader

1>.什么是vue-loader？

　　vue-loader其实是一个webpack的loader

2>.vue的项目是基于webpack来搭建的

3>.创建vue脚手架(即框架)

　　a).npm install vue-cli -g   （搭建脚手架）

　　b).vue init webpack-simple [项目名称]

　　　　例如：vue init webpack-simple demo

　　c).进入到项目目录   例如：cd demo

　　d).安装项目的依赖   npm install

　　e).安装其他vue插件功能

　　　　1）Vue-route路由 安装：

　　　　　　　　即：       cnpm install vue-router -S

　　　　2）Vuex安装：（下文介绍vuex功能）

　　　　　　　　即：       cnpm install vuex-S

　　　　3）….…..等其他插件

　　f).运行项目     npm run dev

　　g)打包项目     npm run build（打包运行需要修改路径）

4>.分析文件demo目录结构

　　node_modules        ===>项目依赖

　　src                 ===>项目的工作目录

{

app.vue     ===>入口文件

main.js     ===>vue的配置

assets      ===>存放js、css、img等文件

}

　　index.html          ===>入口页面

　　webpack.config.js   ===>webpack配置文件

　　package.json        ===>定义了这个项目所需要的各种模块，以及项目的配置信息

（比如名称、版本、许可证等元数据）

Vuex

1).什么事Vuex：它是一个状态管理模式，它集中存储了所有组件的状态(数据、事件。。。)

2).应用场景：中、大型项目使用

3).使用：

1》安装Vuex

cnpm install vuex-S

2》目录结构

webpack.config.js

index.html

src |

| main.js

| app.vue

| store

| state.js ==》vuex文件内容

3》数据

state是管理数据的

4》事件

mutations是管理事件的

src文件包括：

main.js

app.vue

再新建一个store==>文件夹

vuex的文件      //例：state.js   用来显示vuex的相关代码

==============================================

笔记：

1：     Vuex_State(数据)

2：     Vuex_Mutations(事件/方法     事件类型)

3：     Vuex_Getters(过滤状态)

4：     Vuex_Actions(提交事件)

5：     Vuex_Modules(模块)

 ==============================================

个人对vuex的表象理解(笔记)

一个东西，首先要知道为什么用它，为什么要vuex，官方解释为了解决繁杂事件订阅和广播，那么事件的$dispatch,$on,怎么就复杂了？

许多人是不是感觉后者还挺简单的，对的如果简单小型项目，那么不需要vuex，只需要后者就可以，但是如果中大型，尤其是有许多事件传播，

那么vuex作用就体现出现了，为什么？ok，$dispatch,$on,这种传播，如果是单向的还好，向上，向下，但是如果非单向，那么必定是先传上去，

在传下来，中间还要监听好各自事件别给我整乱了。。。试想一下，一个中大型项目，这里会发生什么？一个字乱，有的时候一个事件，对应的模块

都要找半天，而vuex个人感觉相当于中介，又可以看作是模块化，一种对事件通信的模块化处理。。。对一个事件，vuex大体可以看作四步，

第一到action里面查到这个事件的触发，然后立马是mutaction里面查看对应处理，第三步改变store的状态，第四部getter视图渲染；

vuex三个关键词：action,mutation,store,中文意思：活动的，突变的，储存的，注意action，mutation，getter都必须是函数

==============================================

Vuex_项目结构

src文件夹(目录)

包含：

app.vue

main.js

(新建)store目录

index.js    ==>入口

mutations   ==>数据 | 事件

actions     ==>提交事件

types.js    ==>事件名称，定义为常量

getters     ==>computed 返回数据

==============================================

注意：

打包项目需要修改项目路径

）webpack-simple制作的vue项目

1).需要修改  webpack.config.js中的

2).打包后出现dist文件夹，里面包含dist.js、distbuild.mpa和图片。需要自己额外把项目外面的index.html复制一份到dist文件夹中，并且打开index.html，修改里面的

3).若要上传到github，需要把src文件夹中的相关js，css文件也拷贝到dist文件夹里。