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