vue练习小项目

lbool 发布于2019-08-20 14:24 / 1170人阅读

项目参考了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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81603.html

基于 Vue2+Node+mongoDB 的前后端分离全栈练手小项目

摘要：本文源码简介之前刚入门并做好了一个简而全的纯全家桶的项目，数据都是本地模拟请求的详情请移步这里为了真正做到数据库的真实存取，于是又开始入门了并以此来为之前的页面写后台数据接口。本文源码：Github 简介：之前刚入门vue并做好了一个简而全的纯vue2全家桶的项目，数据都是本地 json 模拟请求的；详情请移步这里：vue-proj-demo 为了真正做到数据库的真实存取，于是又...

jay_tian 2019-06-26 17:20 评论0 收藏0
Vue+Koa+Mongodb 小练习

摘要：小练习作者本文首发博客功能基于进行登录，注册，留言的简单网站。所以这个小练习，从一个简单的方面入手，希望能给踩过同样多坑的同路人一点启发。就意味着要重新登录。的作用是进行进程守护，当你的意外的停止的时候，进行重启。 Vue+Koa+Mongodb 小练习作者： Pawn 本文首发： Pawn博客功能：基于vue koa mongodb进行登录，注册，留言的简单网站。体验地址： ...

赵春朋 2019-06-26 17:51 评论0 收藏0
一些基于React、Vue、Node.js、MongoDB技术栈的实践项目

摘要：利用中间件实现异步请求，实现两个用户角色实时通信。目前还未深入了解的一些概念。往后会写更多的前后台联通的项目。删除分组会连同组内的所有图片一起删除。算是对自己上次用写后台的一个强化，项目文章在这里。后来一直没动，前些日子才把后续的完善。欢迎访问我的个人网站：http://www.neroht.com/ 刚学vue和react时，利用业余时间写的关于这两个框架的训练，都相对简单，有的...

tangr206 2019-06-26 17:34 评论0 收藏0
初识Vue，写的一些小练习

摘要：尝鲜演示效果将中的数据渲染到页面上。预览示例代码张三李四王五演示效果实现数据双向绑定。 vue尝鲜演示效果1 将 data 中的数据渲染到页面上。预览：https://91jack.github.io/Vue-... showImg(https://segmentfault.com/img/bVOVbO?w=459&h=231); 示例代码1 ...

Juven 2019-08-21 11:42 评论0 收藏0
Vue.js仿一个购买火车票的app

摘要：项目地址预览的时候如果是用电脑预览的话请切换手机端预览地址源码地址欢迎点赞项目描述主要技术使用实现单页应用使用处理路由使用实现数据存储搜索历史使用存储实现手机端兼容一波小提示因为数据是我自己模拟的，存在里面，我只写了萍乡到南昌和上海到苏州的项目地址预览的时候如果是用电脑预览的话请切换手机端预览地址源码地址（欢迎点赞）项目描述主要技术使用vue.js实现单页应用使...

lufficc 2019-08-20 17:18 评论0 收藏0