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文件夹里。

转载于:https://www.cnblogs.com/ytraister/p/10534161.html