vue.js单文件组件入门笔记


本文目的是介绍如何使用vue.js去构建一个单页面应用。

nodeJs

nodeJs安装

Node.js是一个Javascript运行环境(runtime)

nodejs内置npm。

node -v
vue.js单文件组件入门笔记_第1张图片
npm -v

查看是否安装成功以及查看版本号

nodeJs模块

教程:http://www.runoob.com/nodejs/nodejs-tutorial.html
demo:https://git.oschina.net/MRLH/nodeJsLearning.git
见work-07
了解一下export和import

npm介绍

官网:https://www.npmjs.com/
官方文档:https://docs.npmjs.com/getting-started/what-is-npm
简易汉化:http://www.jianshu.com/nb/10645887

NPM的全称是Node Package Manager ,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。

我们要先配置npm的全局模块的存放路径以及cache的路径。

npm config set prefix “D:\nodejs\node_global”

以及

npm config set cache “D:\nodejs\node_cache”

增加NODE_PATH(全局变量模块存放位置)
打开系统对话框,“我的电脑”右键“属性”-“高级系统设置”-“高级”-“环境变量”。
进入环境变量对话框,在系统变量下新建”NODE_PATH”,输入”D:\nodejs\node_global\node_modules”。(ps:这一步相当关键。)

由于改变了module的默认地址,所以上面的用户变量都要跟着改变一下(用户变量”PATH”新增“%NODE_PATH%;”),要不使用module的时候会导致输入命令出现“xxx不是内部或外部命令,也不是可运行的程序或批处理文件”这个错误。

cnpm

由于国内有墙的原因,使用npm下载包相当慢,有可能因为网速原因导致下载包失败。所以推荐使用cnpm,下载源为淘宝的镜像。
http://npm.taobao.org/

支持 npm 除了 publish 之外的所有命令。

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

npm常用指令介绍

下面的npm皆可用cnpm替代

npm init

执行该指令将会在当前文件夹下生成一个package.json文件。这个文件类似于maven的pom.xml文件。用于管理包,以及记录当前项目的一些描述信息。

package.json文件

dependencies里面放的是项目依赖的包。如vue
devDependencies里面放的是开发时编译需要的包。如babel,[xx]-loader。

npm install

安装命令
简写:npm i

npm install

会安装package.json文件中声明的包,会把包安装到当前文件夹的node_modules目录中。

npm install packagename

安装指定名字的包

npm install packagename -g

安装指定名字的包到全局,这个一般是用于安装需要在命令行使用到的包,如webpack。

npm install packagename --save

安装项目依赖的包,也就是项目中会用到的包,如vue。同时在package.json文件的dependencies中添加该包的描述。

npm i packagename --save-dev

安装编译时需要的包,如babel,[xx]-loader等等。同时在package.json文件的devDependencies中添加该包的描述。

npm uninstall packagename

用于卸载包

webpack

用于打包的一个工具

一些样例:
https://github.com/ruanyf/webpack-demos#demo01-entry-file-source

babel

用于把高版本的js语法转换为低版本语法,让项目中可以使用最新的js语法。

ECMAScript 6语法学习:http://es6.ruanyifeng.com/

eslint

代码质量管理工具,用来避免低级错误和统一代码的风格,这个在项目中可以关闭。

Vue.js

Vue 不支持 IE8 以及更低版本浏览器。

Vue-cli

参考文档:http://www.jianshu.com/p/f8e21d87a572
专门用来下载项目模板的,项目搭建好就不需要了。

npm i -g vue-cli

安装vue-cli

vue -V

检查是否安装成功

vue init webpack my-project

初始化vue工程,或者说是创建模板项目。
项目名为my-project

cd my-project
npm install

安装项目依赖

npm run dev

运行项目

npm run build

编译打包项目,打包到dist目录

vue.js基础

官方文档:https://cn.vuejs.org/v2/guide/
一些demo: https://git.oschina.net/MRLH/vueLearning.git
个人见解:和el表达式很像,和anglarJs更像。
注意事项:注意对象属性的添加和数组中元素的添加。
见:https://cn.vuejs.org/v2/guide/list.html#数组更新检测
见:https://cn.vuejs.org/v2/guide/reactivity.html#变化检测问题

项目实战

demo地址:https://git.oschina.net/MRLH/vue-time-tracker.git
demo详解: http://blog.csdn.net/sinat_17775997/article/details/55097003

目录分析

vue.js单文件组件入门笔记_第2张图片

build,config,test放一些配置文件,一般不进行修改。
node_modules放置项目依赖的包文件。
dist目录放置打包后生成的文件,发布时只需要dist文件夹
static放置静态资源不会参与打包,一般放置一些图片资源,不要放样式文件到这个里面,shotcut文件放这个目录里面。
src目录放置源码
index.html一般不做修改。

vue.js单文件组件入门笔记_第3张图片

assets目录用来放置资源文件
components放置vue组件
router用于控制界面跳转
store用于存储数据,以及操作数据
views用于存放vue界面

views和components存放的东西是没有区别的,都是vue组件,只是根据作用不同进行区分的。

vue-resource

官方建议使用axios
main.js

import axios from 'axios'
Vue.prototype.$http = axios

其他地方使用的话 如同使用 vue-resource 一样

this.$http.get(URL).then(response => {
    // success callback
}, response => {
    // error callback
})

Vue-router

官方文档:https://router.vuejs.org/zh-cn/
一个vue实例只有一个vue-router。
通常一个

router-link

name

用于页面导航,效果约等于标签

router-view


路由匹配到的组件将渲染在这里

vuex

官方文档:https://vuex.vuejs.org/zh-cn/

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

  • state,驱动应用的数据源;
  • view,以声明方式将state映射到视图;
  • actions,响应在view上的用户输入导致的状态变化。

以下是一个表示“单向数据流”理念的极简示意:


vue.js单文件组件入门笔记_第4张图片
单向数据流

但是,当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:

  • 多个视图依赖于同一状态。
  • 来自不同视图的行为需要变更同一状态。

Vuex 可以帮助我们管理共享状态

vue.js单文件组件入门笔记_第5张图片
vuex

State

用于存放数据

取数据方法:

this.$store.state.xxx

Getters

用于存放处理后的数据

取数据方法:

this.$store.getters.xxx

Mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

调用方法

store.commit('xxx')

Actions

Action 类似于 mutation,不同在于:

  • Action 提交的是 mutation,而不是直接变更状态。
  • Action 可以包含任意异步操作。

调用方法

store.dispatch('increment')

Modules

使用单一状态树,导致应用的所有状态集中到一个很大的对象。但是,当应用变得很大时,store 对象会变得臃肿不堪。

为了解决以上问题,Vuex 允许我们将 store 分割到模块(module)。每个模块拥有自己的 state、mutation、action、getters、甚至是嵌套子模块。

你可能感兴趣的:(vue.js单文件组件入门笔记)