摘要:最近在研究的相关知识,最好的学习方法莫过于自己开发一个,这样带着问题来学习,进步自然飞速。在首页里,我们会用写一个导航,通过的路由导航到不同的应用。我们在文件夹里创建一个新的组件。
最近在研究vue的相关知识,最好的学习方法莫过于自己开发一个SPA,这样带着问题来学习,进步自然飞速。于是边查边写差不多花了2周写完了一个todo-list,功能不够完备,但是麻雀虽小,却也是五脏俱全,基本功能是可以满足的了。话不多说,直接来看项目吧。技术栈
vue全家桶(vue、vuex、vue-router)
webpack实现打包和热加载
ES6
UI框架用的是bootstrap
rem方法完成适配移动端
localstorage实现数据的保存
node和npm(真是零基础啊,npm都是现学现卖的...)
以上。
接下来就是代码分析了。
一、用vue-cli配置一个项目这一个步骤没什么好说的,网上教程一大堆,随便找一个照着走就好了。
完成后,你应该有一个项目的文件夹,里面应该有这几个文件:
README.md、build、config、index.html、package.json、src、static
嗯,就这样。
先安装依赖,命令行到对应根目录文件夹执行如下命令(推荐VS code,自带命令行输入,方便!)
npm install
稍等片刻完成(如果太慢,推进啊淘宝镜像的cnpm安装)
安装好之后,继续安装:
npm install vuex vue-router bootstrap --save
安装完成后,需要配置以下文件,确保能够使用。
打开:xx(项目文件夹)-src-main.js
如下:
import Vue from "vue" import VueRouter from "vue-router" import App from "./App" import "bootstrap/dist/css/bootstrap.css" Vue.use(VueRouter) const routes=[ { path:"/", component:Home }, { path:"/todolist", component:todolist } ]; const router=new VueRouter({routes}); /* eslint-disable no-new */ const app=new Vue({ router, el:"#app", render:h=>h(App) //ES6语法 })
这里配置了vue-router和bootstrap,项目中可以使用了,接着我们还需要配置vuex和jQuery。
配置vuex和jQuery首先在根目录创建一个文件夹,命名为vuex,在里面创建一个store.js文件,
配置如下:
import Vue from "vue" import Vuex from "vuex" Vue.use(Vuex); const state={ } const getters={ } const mutations={ } export default new Vuex.Store({ state, getters, mutations })
const是ES6的语法,这里getters,state,mutations都不急着用,先配置好。
配置好store.js,回到main.js继续配置。
增加一些内容:
import Vue from "vue" import VueRouter from "vue-router" import store from "./vuex/store" import App from "./App" import Home from "./components/Home.vue" import todolist from "./components/todolist.vue" import "bootstrap/dist/css/bootstrap.css" Vue.use(VueRouter) const routes=[ { path:"/", component:Home }, { path:"/todolist", component:todolist } ]; const router=new VueRouter({routes}); /* eslint-disable no-new */ const app=new Vue({ router, store, el:"#app", render:h=>h(App) //ES6语法 })
好了,vuex就配置完了。接着我们配置JQuery,因为bootstrap依赖JQuery,所以这里也必须放上去。
老规矩,先用npm安装JQuery。
npm install jquery --save
打开xx-build-webpack-base.conf.js,在module.exports里面添加如下代码:
plugins:[ new webpack.optimize.CommonsChunkPlugin("common.js"), new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery" }) ]
打开main.js配置JQuery和bootstrap的动效。
添加一点内容:
import $ from "jquery" import "bootstrap/dist/js/bootstrap.min.js"
OK,至此,所有的前期配置就完成了,可以开始正式的代码书写了。
三、组件结构和实现Vue最碉堡的地方就是它的组件式开发,所以这个思想是我们在写代码式要时刻注意的,如何合理的划分自己的组件,是一件很需要思考的事,接下来我将详细介绍我的组件内容和实现的功能。
下面是我的组件结构:
在src文件夹里,有一个主组件:app.vue,有一个组件文件夹:conponents,在这里面我放了4个组件,如下:
Home.vue ———— 首页
todolist.vue ———— todolist 应用主页面
sidebar.vue ———— todolist任务列表
editor.vue ———— todolist任务编辑
我会一个个介绍功能。
在首页里,我们会用bootstrap写一个导航,通过vue-router的路由导航到不同的应用。
代码如下:
首页的上部分是一个导航,导航的UI和样式用的是bootstrap,导航用路由实现链接到不同的应用,要注意的是,不同的应用我们用不同的组件封装,比如这个待办事项的应用,我们用的是todolist.vue。还要注意的是,这些组件的注册和路由链接都需要在main.js中配置。不要忘记了。
返回查看main.js看看代码是怎么写的。
配置完后,我们的主页面上只有一个导航。接着我们配置主页。
我们在xx-src-components文件夹里创建一个新的组件:Home.vue。这个组件是我们的首页内容,这里我放了一张图,和一句话:欢迎!这里有你需要的App。这里同样用到了bootstrap的栅格系统,这样就可以兼容移动端了。
看代码:
todolist 添加meta和一段JS完成bootstrap的适应和rem方法自适应大小。
第二是localstorage实现存储。毕竟是一个todolist应用,每次打开都要重新建任务怎么行?
这里我用了一个vue的localstorage插件:地址
npm安装插件:npm install vue-localstorage --savestore.js配置:
import Vue from "vue" import Vuex from "vuex" Vue.use(Vuex); import VueLocalStorage from "vue-localstorage" Vue.use(VueLocalStorage) const STORAGE_KEY="myapp-todolist" const state={ items:JSON.parse(window.localStorage.getItem(STORAGE_KEY) || "[]"), activeTask:{} } const getters={ items:state=>state.items, activeTask:state=>state.activeTask } const mutations={ addTask(state,task){ var myDate=new Date(); var y=myDate.getFullYear(); var m, mm=myDate.getMonth()+1; if(mm<10){ m="0"+mm; }else{ m=mm; } var d, dd=myDate.getDate(); if(dd<10){ d="0"+dd; }else{ d=dd; } var currentTime=y+m+d; state.items.push({ task, isFinished:false, details:"this is a new task", setTime:currentTime }) }, deleteTask(state,index){ state.items.splice(index,1) }, toggleCheck(state,index){ state.items[index].isFinished=!state.items[index].isFinished }, setActivetask(state,item){ state.activeTask=item }, editTask(state,task){ state.activeTask.task=task; for(let i in state.items){ if(i==state.activeTask){ i.task=task; } } }, editDetails(state,details){ state.activeTask.details=details; for(let i in state.items){ if(i==state.activeTask){ i.details=details; } } }, editSettime(state,settime){ state.activeTask.setTime=settime; for(let i in state.items){ if(i==state.activeTask){ i.setTime=settime; } } }, clearAll(state){ state.activeTask={}; }, reList(state){ function compare(propertyName){ return function(obj1,obj2){ var value1=obj1[propertyName]; var value2=obj2[propertyName]; if(value2value1){ return -1; }else{ return 0; } } } state.items.sort(compare("setTime")); } } const localStoragePlugin = store=>{ store.subscribe((mutation,{items})=>{ window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items)) }) } export default new Vuex.Store({ state, getters, mutations, plugins:[localStoragePlugin] }) 要改的解放并不多,主要是把任务数据的数组转换成localstorage的格式。
五、源码和参考文献
完成了!撒花~~这个todo-list实在是简陋不堪,但是基础不好的我也差不多花了2个星期才写完,在写这个应用的时候我是抱着诚恳的态度的,所以也确实花了很多的心血,包括学习命令行,npm、搭建项目脚手架、查找资料,中间的磨练和挫折也不必多说,一切的辛苦都在看着这个应用能够运行的那一刻烟消云散了。
写了一篇这么长的,我尽量用我认为最明白清楚的语言来表达,中间肯定有很多错误和疏漏,欢迎大神拍砖、指点。写这篇blog的目的也就是重新梳理一下代码的思路,我是抱着学习的态度来写的。中间的代码有很多重复的地方,在大神看来,无疑是有着占篇幅的嫌疑,但也是希望能更加清楚地表述,方便新人理解。我也是刚入此门,十分能理解代码不详细带来的困惑。
在起名字的时候,我没有直接说这是一个todo-list,而说是一个应用盒子,是因为我想把它作为一个我的代表项目,里面会集成许多的应用,todolist、音乐、计算器等等,一方面练手,一方面攒一个拿得出手的项目,方便以后求职。
说了这么多废话,下面是干货:
todo-list源码(我的github,欢迎star,fork)
Vue2.0 新手完全填坑攻略(如果你还没学过Vue,先看这个入门)
vue2.0 构建单页应用最佳实战(bootstrap+vue架构一个todolist)
Vue.js+Vuex:一个简单的记事本(介绍vuex项目实战最清楚的教程)
当然,官方文档也是非常重要的,看着教程你可以写出需要的代码,但是只有看着文档,你才能知道为什么要这样写。
vue官方文档
vuex官方文档that"s all~
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/107078.html
相关文章
用Vue搭建一个应用盒子(二):datetime-picker
摘要:接着上次的进度,我们已经实现了一个。我们应该完成的效果是一个,日期选择器。好了,到这一步,还不能实现这个插件。我们还需要添加一个方法,因为并没有被执行,所以我们需要添加如下代码好了,这里事件选择插件就能顺利使用了。与的结合使用实例 接着上次的进度,我们已经实现了一个todo-list。它已经具备了基本的功能,可以新建、编辑、删除任务。但是美中不足的是,它的时间设定上只能通过输入一段字符...
用vue框架的基本原理,简单实现一个todo-list
摘要:前言最近在学习框架的基本原理,看了一些技术博客以及一些对源码的简单实现,对数据代理数据劫持模板解析变异数组方法双向绑定有了更深的理解。 前言 最近在学习vue框架的基本原理,看了一些技术博客以及一些对vue源码的简单实现,对数据代理、数据劫持、模板解析、变异数组方法、双向绑定有了更深的理解。于是乎,尝试着去实践自己学到的知识,用vue的一些基本原理实现一个简单的todo-list,完成...
todo-list 项目问题总结(使用 react 进行开发)
摘要:项目问题总结这个项目,很简单,前端使用,后端使用进行开发。方便移动端开发。当动画结束后,有一个钩子函数可以使用其他一些功能组件,都是自己尝试去编写的,像日历组件组件组件等。版本的,是没有任何的钩子函数,我就感觉懵逼了。。。 todo-list 项目问题总结 这个 todo-list 项目,很简单,前端使用 react,后端 nodejs 使用 koa2 进行开发。数据库使用 Mysql...
应用vue2+vuex+vue-router+webpack2+es6+express+mysql技
摘要:其实这里还是有漏洞的,坐等高手指出来微笑脸后台没有用生成一个完整的架构。来自不同视图的行为需要变更同一状态。 最近对vue很感兴趣,趁闲暇时间,模仿了wunderlist里面的部分功能,编写了前后端分离的基于vue技术栈和express的todolist小项目。写这篇博文来总结思考下。项目所在github,可以自行参考克隆。 本人博客 总体概览 整个项目最终做成的样子如下: showI...
JavaScript从初级往高级走系列————MVVM-Vue
摘要:原文博客地址如何理解如何实现是否解读过的源码与框架的区别实现实现独立初始化实例两者的区别数据和视图的分离,解耦开放封闭原则,对扩展开放,对修改封闭在中在代码中操作视图和数据,混在一块了以数据驱动视图,只关心数据变化, 原文博客地址:https://finget.github.io/2018/05/31/mvvm-vue/ MVVM 如何理解 MVVM 如何实现 MVVM 是否解读过 ...
发表评论
0条评论
![]()
MAX_zuo
男|高级讲师
TA的文章
阅读更多
易探云:枣庄高防云服务器促销,4核4G内存/30M带宽/100G防御,130元/月
阅读 3703·2021-11-23 10:10
你可能不了解的动画神器之requestAnimationFrame及其兼容写法
阅读 3422·2019-08-30 14:03
CSS实用技巧总结一
阅读 2154·2019-08-30 13:09
前端每日实战:29# 视频演示如何不用 transition 和 animation 也能做网页动画
阅读 3480·2019-08-29 15:29
移动端h5开发相关内容总结(四)
阅读 1622·2019-08-29 11:23
CSS清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?
阅读 2086·2019-08-28 18:28
Webpack Loader 高手进阶(一)
阅读 2930·2019-08-26 13:34
用Vue搭建一个应用盒子(一):todo-list
阅读 2245·2019-08-26 11:32
<阅读需要支付1元查看