vue练习小项目

项目参考了notepad，很是感谢。
用flex布局页面，响应式，简化了内容，当作练手vue项目

项目开发过程当中，遇到的问题及知识点所有记录在下方

vue2 + vuex + flex + localStorage 本地记事本

项目使用了vue cli 脚手架，webpack-simple模板,fontawesome图标

在线预览及本地安装

notebook github
点击预览

npm install
npm run dev

功能

相似vue官网的TodoMVC

• 增删事件

• 本地化存储

搜索及编辑功能还未完成，后续会再用上rouer

安装 normalize.css模块

css reset的一种方案

配置读取css和字体文件
npm install style-loader --save-dev
npm install css-loader --save-dev
npm install file-loader --save-dev

注意: webpack-simple模板中，须要对引入css路径进行配置    
在 webpack.config.js 中的 loaders 数组加入如下配置
{
    test: /\\.css$/,
    loader: "style!css"
},
{
    test: /\\.(eot|woff|woff2|ttf)([\\?]?.*)$/,
    loader: "file"
}

npm安装normalize.css
npm install normalize.css --save

在main.js中 
import 'normalize.css'

安装字体库

vue-awesome
fontawesome

非父子组件通讯

在开始开发的过程当中，没用使用vuex状态管理，遇到了非父子组件通讯的问题，能够使用vue2的bus

vue bus

新建一个bus.js

import Vue from 'vue'
export default new Vue()

使用 $emit 监听   $on响应

Bus.$on('transmit', function(tt) {
       this.completedClick()
});
注意: 以上的this是function(){} 中的this

Bus.$on('transmit', () => this.completedClick());
使用短语法 this指向bus

methods中的方法相互调用

用绑定this的方法，如:
this.roundNum = this.$options.methods.rnd.bind(this)(10,100);
或
箭头函数

事件处理器

事件处理器

① 监听事件，直接触发 JavaScript代码
② 方法事件处理器，触发函数，可调用原生DOM事件
③ 内联处理器，绑定方法并给予参数，此方法中，可再添加$event参数，访问原生DOM事件对象，如target、preventDefault

vue的事件处理器做方方法，其实和js事件处理程序是同样的，以上
①就是HTML事件处理程序，②是DOM0别事件处理程序，③是DOM2级事件处理程序，写的时候道理和咱们平时在html在添加事件是一个道理

事件处理器参考连接

外部访问localhost

在调试的时候，除了chrome的模拟器，还须要在真实机器上测试,在手机上访问开发电脑上的localhost

第一步:接入相同的网络环境，获取ip地址

win: ipconfig
mac: ifconfig

第二步:

在webpack配置中，在devServer中添加host: '0.0.0.0'，在启动的时候会打开http://0.0.0.0:8080
DevDocs host - Webpack 2 - DevServer

FAQ及其余vue内容

单个.vue组件中的

export default {
    name:''
}

其中的name主要给递归组件用

npm run build 执行错误

ERROR in build.js from UglifyJs
SyntaxError: Unexpected token: name (warn) [./~/vue-awesome/util.js:3,0][build.js:24054,4]

参考配置解决vue-awesome

es6预览

基于 Vue 2.0 和 Material Desigin 的 UI 组件库

Mint UI 基于 Vue.js 的移动端组件库

音乐视频等api