脚本宝典收集整理的这篇文章主要介绍了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

脚本宝典总结

以上是脚本宝典为你收集整理的vue练习小项目全部内容，希望文章能够帮你解决vue练习小项目所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。