web前端0创设单页应用最棒实战,webpack记事本项目开创

By admin in web前端 on 2019年6月18日

小编们在src下开创个目录为 store

vue-cli+webpack记事本项目创立,vue-cliwebpack

vue-cli+webpack记事本项目选拔的是vue-cli2.0之中的品类营造筑工程具webpack

类型的备选专门的学问:

1.了解vue2.0

2.摸头部分ES6

3.储备一些webpack知识

参照项目地址:vue2.0创设单页应用最棒实战

咱俩将会选拔选拔一些vue周围的库 vue-cli , vue-router , vue-resource ,
vuex

1.用到vue-cli创制项目

2.应用vue-router实现单页路由

3.用vuex管理大家的数据流

4.运用vue-resource请求我们的node服务端

5.使用.vue文件实行组件化的花费

PS:本文node v6.2.2 npm v3.9.5 vue v2.1.0 vue-router v2.0.3 vuex v2.0.0

最终大家将会营造出一个小demo,不赘述,直接上海教室。

web前端 1

安装

1.大家将会动用webpack去为我们的模块打包,预管理,热加载。如若你对webpack不熟悉,它便是足以支持我们把多个js文件打包为1个输入文件,并且能够达到规定的标准按需加载。这就象征,大家绝不忧虑由于采纳太多的组件,导致了过多的HTTP请求,那是可怜方便于产品体验的。但大家并不只是为了这几个而利用webpack,我们须求用webpack去编写翻译.vue文件,假使没有接纳一个loader去调换大家.vue文件里的style、js和html,那么浏览器就不大概识别。

2.模块热加载是webpack的四个卓殊碉堡的性状,将会为大家的单页应用带来非常大的有利。

普普通通来讲,当我们修改了代码刷新页面,那应用里的有着情形就都尚未了。那对于开拓一个单页应用来讲是可怜痛楚的,因为急需再度在跑壹次流程。假如有模块热加载,当您改改了代码,你的代码会直接修改,页面并不会刷新,所以状态也会被保存。

3.Vue也为大家提供了CSS预管理,所以我们得以选拔在.vue文件里写LESS或然SASS去替代原生CSS。

4.大家过去家常要求利用npm下载一批的依赖性,然近些日子后大家能够挑选Vue-cli。那是三个vue生态系统中多少个豪杰创举。那表示大家无需手动创设我们的档期的顺序,而它就足以极快地为大家转换。

率先,安装vue-cli。(确认保障您有node和npm)

npm i -g vue-cli

然后创造一个webpack项目同一时间下载依赖

vue init webpack vue-tutorial

web前端 2

cd vue-tutorial

npm i

紧接着使用 npm run dev 在热加载中运作我们的接纳

这一行命令代表着它会去找到 package.json 的 scripts 对象,实行 node
bulid/dev-server.js
。在这文件里,配置了Webpack,会让它去编写翻译项目文件,并且运行服务器,我们在
localhost:8080 就可以查看大家的接纳。

web前端 3

这几个都希图好后,我们需求为大家的路由、XHOdyssey请求、数据管理下载七个库,大家得以从vue的官方网站中找到他们。其它大家使用
bootstrap 作为本人的UI库

npm i vue-resource vue-router vuex
bootstrap –save

初始化(main.js)

翻开我们的采纳文本,我们得以在src目录下找到 App.vue 和 main.js 。
main.js将会作为大家使用的进口文件而 App.vue
会作为大家应用的开首化组件。先让大家来宏观下 main.js

// src/main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'

import App from './App'
import Home from './components/Home'
import 'bootstrap/dist/css/bootstrap.css'

Vue.use(VueRouter)
Vue.use(VueResource)

const routes = [{
 path : '/',
 component : Home
},{
 path : '/home',
 component : Home
}];

const router = new VueRouter({
 routes
});

/* eslint-disable no-new */
// 实例化我们的Vue
var app = new Vue({
 el: '#app',
 router,
 ...App,
});

那有七个与1.0例外的地点

一、 vue-router
路由的参数由对象统一改为了数组要小心。还应该有则是实例化vue的el
参数已经无法安装 html 和 body 了,因为在 vue2 中是会交替大家钦点的标签

二、大家亟须在实例化vue的时候内定渲染什么组件,在此以前大家是经过路由来内定如router.start(App,
‘#app’) ,而在vue第22中学则无需了

可以窥见大家在 main.js 里使用了八个零部件 App.vue 和 Home.vue
,稍后让我们实际达成它们的剧情。

而大家的 index.html 只必要保留 <div id=”app”></div>
就能够,我们的Vue在实例化时设置了 el : ‘#app’ 所以会交替那标签,为大家App 组件的剧情

//index.html
<div id="app"></div>

我们的初叶化就到那甘休了,接下去让大家开首创建组件。

创造首页组件

率先我们在App.vue里为大家的行使写个顶端导航。

// src/App.vue

<template>
 <div id="wrapper">
 <nav class="navbar navbar-default">
 <div class="container">
 <a class="navbar-brand" href="#" rel="external nofollow" >
 <i class="glyphicon glyphicon-time"></i>
 计划板
 </a>
 <ul class="nav navbar-nav">
 <li><router-link to="/home">首页</router-link></li>
 <li><router-link to="/time-entries">计划列表</router-link></li>
 </ul>
 </div>
 </nav>
 <div class="container">
 <div class="col-sm-3">

 </div>
 <div class="col-sm-9">
 <router-view></router-view>
 </div>
 </div>
 </div>
</template>

除却大家的 navbar 以外,大家还须要二个 .container
去放大家其余须要展现的音讯。

再正是在此地我们要放多少个 router-view 标签, vue-router
的切换便是通过那么些标签开端突显的。

在那有个与1.0例外的位置

从前笔者们得以向来通过写a标签
然后写v-link属性进行路由跳转,在vue第22中学改为了写<router-link>
标签再写对应属性(to)实行跳转

随即,大家必要成立多个 Home.vue 作为大家的首页

// src/components/Home.vue

<template>
 <div class="jumbotron">
 <h1>任务追踪</h1>
 <p>
 <strong>
 <router-link to="/time-entries">创建一个任务</router-link>
 </strong>
 </p>
 </div>
</template>

不出意外的话,你能够看见如下效果

web前端 4

始建侧边栏组件

眼下我们首页左边还恐怕有一块空白,大家供给它放下四个侧面栏去总计全部安插的总时间。

// src/App.vue

 //...

 <div class="container">
 <div class="col-sm-3">
 <sidebar></sidebar>
 </div>
 <div class="col-sm-9">
 <router-view></router-view>
 </div>
 </div>

 //...

<script>
 import Sidebar from './components/Sidebar.vue'

 export default {
 components: { 'sidebar': Sidebar },
 }
</script>

在 Sidebar.vue 我们须要通过store去获得总时间,大家的总时间是共享的数目

// src/components/Sidebar.vue
<template>
 <div class="panel panel-default">
 <div class="panel-heading">
 <h1 class="text-center">已有时长</h1>
 </div>

 <div class="panel-body">
 <h1 class="text-center">{{ time }} 小时</h1>
 </div>

 </div>
</template>

<script>
 export default {
 computed: {
 time() {
 return this.$store.state.totalTime
 }
 }
 }
</script>

创办安排列表组件

下一场我们需求去成立大家的年月追踪列表。

// src/components/TimeEntries.vue

<template>
 <div>
 //`v-if`是vue的一个指令
 //`$route.path`是当前路由对象的路径,会被解析为绝对路径当
 //`$route.path !== '/time-entries/log-time'`为`true`是显示,`false`,为不显示。
 //to 路由跳转地址
 <router-link
 v-if="$route.path !== '/time-entries/log-time'"
 to="/time-entries/log-time"
 class="btn btn-primary">
 创建
 </router-link>

 <div v-if="$route.path === '/time-entries/log-time'">
 <h3>创建</h3>
 </div>

 <hr>

 <router-view></router-view>

 <div class="time-entries">
 <p v-if="!plans.length"><strong>还没有任何计划</strong></p>

 <div class="list-group">
 <--
 v-for循环,注意参数顺序为(item,index) in items
 -->
 <a class="list-group-item" v-for="(plan,index) in plans">
 <div class="row">
 <div class="col-sm-2 user-details">

 <--
 `:src`属性,这个是vue的属性绑定简写`v-bind`可以缩写为`:`
 比如a标签的`href`可以写为`:href`
 并且在vue的指令里就一定不要写插值表达式了(`:src={{xx}}`),vue自己会去解析
 -->

 <img :src="plan.avatar" class="avatar img-circle img-responsive" />
 <p class="text-center">
 <strong>
  {{ plan.name }}
 </strong>
 </p>
 </div>

 <div class="col-sm-2 text-center time-block">
 <h3 class="list-group-item-text total-time">
 <i class="glyphicon glyphicon-time"></i>
 {{ plan.totalTime }}
 </h3>
 <p class="label label-primary text-center">
 <i class="glyphicon glyphicon-calendar"></i>
 {{ plan.date }}
 </p>
 </div>

 <div class="col-sm-7 comment-section">
 <p>{{ plan.comment }}</p>
 </div>

 <div class="col-sm-1">
 <button
 class="btn btn-xs btn-danger delete-button"
 @click="deletePlan(index)">
 X
 </button>
 </div>

 </div>
 </a>

 </div>
 </div>
 </div>
</template>

关于template的分解,都写在一齐了,再看看我们的 script

// src/components/TimeEntries.vue

<script>
 export default {
 name : 'TimeEntries',
 computed : {
 plans () {
 // 从store中取出数据
 return this.$store.state.list
 }
 },
 methods : {
 deletePlan(idx) {
 // 稍后再来说这里的方法
 // 减去总时间
 this.$store.dispatch('decTotalTime',this.plans[idx].totalTime)
 // 删除该计划
 this.$store.dispatch('deletePlan',idx)
 }
 }
 }
</script>

别忘了为我们的机件写上部分亟待的样式

// src/components/TimeEntries.vue

<style>
 .avatar {
 height: 75px;
 margin: 0 auto;
 margin-top: 10px;
 margin-bottom: 10px;
 }
 .user-details {
 background-color: #f5f5f5;
 border-right: 1px solid #ddd;
 margin: -10px 0;
 }
 .time-block {
 padding: 10px;
 }
 .comment-section {
 padding: 20px;
 }
</style>

既是大家的数目是共享的,所以大家供给把数据存在 store 里

作者们在src下创办个目录为 store

在 store 下各自创设4个js文件 actions.js , index.js , mutation-types.js ,
mutations.js

看名字也就精晓那4个分别是做什么用的了,提出大家多读书阅读 vuex
的文档,多姿势多动手实行,稳步的也就能够分晓了。

// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

// 先写个假数据
const state = {
 totalTime: 0,
 list: [{
 name : '二哲',
 avatar : 'https://sfault-avatar.b0.upaiyun.com/147/223/147223148-573297d0913c5_huge256',
 date : '2016-12-25',
 totalTime : '6',
 comment : '12月25日完善,陪女朋友一起过圣诞节需要6个小时'
 }]
};

export default new Vuex.Store({
 state,
})

是因为新添了页面和store 在大家的入口js文件里安排下

// src/main.js
import store from './store'
import TimeEntries from './components/TimeEntries.vue'
//...

const routes = [{
 path : '/',
 component : Home
},{
 path : '/home',
 component : Home
},{
 path : '/time-entries',
 component : TimeEntries,
}];

var app = new Vue({
 el: '#app',
 router,
 store,
 ...App,
});

不出意外的话,你能够在 /time-entries 路由下看见那样的页面

web前端 5

透过 vue-Devtools
我们得以窥见我们的store已经社团好了还要成功从store获取了数据

创立职分组件

这些比较轻松大家直接提交代码

// src/components/LogTime.vue

<template>
 <div class="form-horizontal">
 <div class="form-group">
 <div class="col-sm-6">
 <label>日期</label>
 <input
 type="date"
 class="form-control"
 v-model="date"
 placeholder="Date"
 />
 </div>
 <div class="col-sm-6">
 <label>时间</label>
 <input
 type="number"
 class="form-control"
 v-model="totalTime"
 placeholder="Hours"
 />
 </div>
 </div>
 <div class="form-group">
 <div class="col-sm-12">
 <label>备注</label>
 <input
 type="text"
 class="form-control"
 v-model="comment"
 placeholder="Comment"
 />
 </div>
 </div>
 <button class="btn btn-primary" @click="save()">保存</button>
 <router-link to="/time-entries" class="btn btn-danger">取消</router-link>
 <hr>
 </div>
</template>

<script>
 export default {
 name : 'LogTime',
 data() {
 return {
 date : '',
 totalTime : '',
 comment : ''
 }
 },
 methods:{
 save() {
 const plan = {
 name : '二哲',
 image : 'https://sfault-avatar.b0.upaiyun.com/888/223/888223038-5646dbc28d530_huge256',
 date : this.date,
 totalTime : this.totalTime,
 comment : this.comment
 };
 this.$store.dispatch('savePlan', plan)
 this.$store.dispatch('addTotalTime', this.totalTime)
 this.$router.go(-1)
 }
 }
 }
</script>

本条组件很轻便就3个input输入而已,然后就多少个开关,保存大家就把数据push进大家store的列表里

LogTime 属于我们 TimeEntries
组件的一个子路由,所以我们照例供给配备下大家的路由,并且选择webpack让它懒加载,收缩我们首屏加载的流量

// src/main.js
//...
const routes = [{
 path : '/',
 component : Home
},{
 path : '/home',
 component : Home
},{
 path : '/time-entries',
 component : TimeEntries,
 children : [{
 path : 'log-time',
 // 懒加载
 component : resolve => require(['./components/LogTime.vue'],resolve),
 }]
}];

//...

vuex部分

在vue2.0中撤消了行使事件的措施开始展览通讯,所以在小品种中大家得以行使伊芙nt
Bus,别的最棒都使用vuex,本文我们使用Vuex来贯彻多少通讯

深信不疑你刚刚已经看见了作者写了众多 this.$store.dispatch(‘savePlan’, plan)
类似那样的代码,大家再一次会师验证。

细心境忖一下,我们供给多少个全局数据,三个为保有计划的总时间,二个是铺排列表的数组。

src/store/index.js 没啥太多可介绍的,其实就是流传大家的 state ,
mutations, actions
来开端化大家的Store。假设有必要的话大家还或许供给创建大家的
getter在本例中就不用了。

随之大家看 mutation-types.js
,既然想很明显询问多少,那就应该有如何的操作看起,当然那也看个人口味哈

// src/store/mutation-types.js

// 增加总时间或者减少总时间
export const ADD_TOTAL_TIME = 'ADD_TOTAL_TIME';
export const DEC_TOTAL_TIME = 'DEC_TOTAL_TIME';

// 新增和删除一条计划
export const SAVE_PLAN = 'SAVE_PLAN';
export const DELETE_PLAN = 'DELETE_PLAN';
// src/store/mutations.js
import * as types from './mutation-types'

export default {
 // 增加总时间
 [types.ADD_TOTAL_TIME] (state, time) {
 state.totalTime = state.totalTime + time
 },
 // 减少总时间
 [types.DEC_TOTAL_TIME] (state, time) {
 state.totalTime = state.totalTime - time
 },
 // 新增计划
 [types.SAVE_PLAN] (state, plan) {
 // 设置默认值,未来我们可以做登入直接读取昵称和头像
 const avatar = 'https://sfault-avatar.b0.upaiyun.com/147/223/147223148-573297d0913c5_huge256';

 state.list.push(
 Object.assign({ name: '二哲', avatar: avatar }, plan)
 )
 },
 // 删除某计划
 [types.DELETE_PLAN] (state, idx) {
 state.list.splice(idx, 1);
 }
};

提起底对应看我们的 actions 就很清楚了

// src/store/actions.js

import * as types from './mutation-types'

export default {
 addTotalTime({ commit }, time) {
 commit(types.ADD_TOTAL_TIME, time)
 },
 decTotalTime({ commit }, time) {
 commit(types.DEC_TOTAL_TIME, time)
 },
 savePlan({ commit }, plan) {
 commit(types.SAVE_PLAN, plan);
 },
 deletePlan({ commit }, plan) {
 commit(types.DELETE_PLAN, plan)
 }
};

大家的 actions 其实就是去接触事件和扩散参数啦

加了那八个文件后大家的store终于完全了,更新下我们的代码

// src/store/index.js 完整代码

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './actions'

Vue.use(Vuex);

const state = {
 totalTime: 0,
 list: []
};

export default new Vuex.Store({
 state,
 mutations,
 actions
})

this.$store.dispatch(‘savePlan’, plan) 当实行了这样的点子就能够调用
actions.js 里的 savePlan 方法,而 savePlan 又会触发 mutations 里的
types.SAVE_PLAN 最后修改数据视图更新

PS:在那有个本领正是,在 mutations 里都以用小写下划线连接,而我们的
actions 里都用小写驼峰对应。

个人通晓那其实就是叁个发布订阅的格局

mutation-types 记录大家有着的轩然大波名

mutations 注册大家各类数据变动的形式

actions 则能够编写异步的逻辑只怕是一些逻辑,再去 commit
咱俩的风浪

假如有 getter 大家得以把一部分亟待管理回来的数量放在那就能够,不开展业务操作

最后别忘了在大家的 main.js 里使用大家的 store

// src/store/main.js

import store from './store'
// ...

var app = new Vue({
 el: '#app',
 router,
 store,
 ...App,
});

开班感受下您和谐的职分安排板吧!

最后

通过本文,大家得以学学到众多有关vue的风味。

1.了解了vue-cli脚手架

2.始发对webpack有了一些打听和认知

3.怎么着用.vue高兴的付出

4.采用vuex进行零部件通讯

5.路由(子路由)的应用

6.使用 vue-devtools 观看我们的数量

个体网址 :

github地址: …

上述正是本文的全体内容,希望对我们的读书抱有援救,也冀望大家多多帮衬帮客之家。

vue-cli+webpack记事本项目利用的是vue-cli2.0之中的品类创设筑工程具webpack
项目标希图专门的职业: 1.明白vue2.0…

vue2.0创设单页应用最棒实战,vue2.0营造实战

前言

大家将会挑选使用部分vue周边的库 vue-cli , vue-router , vue-resource ,
vuex

1.采取vue-cli创制项目

2.运用vue-router实现单页路由

3.用vuex管理我们的数据流

4.使用vue-resource请求大家的node服务端

5.使用.vue文件进行组件化的支付

PS:本文node v6.2.2 npm v3.9.5 vue v2.1.0 vue-router v2.0.3 vuex v2.0.0

最终大家将会塑造出一个小demo,不赘述,直接上海体育场面。

web前端 6

安装

1.大家将会使用webpack去为大家的模块打包,预管理,热加载。假诺您对webpack面生,它正是能够帮助大家把八个js文件打包为1个入口文件,并且能够直达按需加载。那就代表,大家不用担忧由于选用太多的机件,导致了过多的HTTP请求,那是老大便宜于产品体验的。但大家并不只是为着这些而选拔webpack,我们供给用webpack去编写翻译.vue文件,假使未有接纳三个loader去转变大家.vue文件里的style、js和html,那么浏览器就不或然甄别。

2.模块热加载是webpack的五个要命碉堡的特征,将会为大家的单页应用带来巨大的福利。

经常来讲,当大家修改了代码刷新页面,那应用里的装有情状就都未有了。那对于开垦贰个单页应用来讲是老大难受的,因为急需重新在跑二遍流程。假若有模块热加载,当你改改了代码,你的代码会一直改动,页面并不会刷新,所以状态也会被封存。

3.Vue也为我们提供了CSS预管理,所以我们得以接纳在.vue文件里写LESS大概SASS去代替原生CSS。

4.大家过去普通须求运用npm下载一批的注重,不过今后我们得以选择Vue-cli。那是贰个vue生态系统中四个宏伟创举。那意味着我们无需手动创设我们的门类,而它就足以高速地为大家转换。

首先,安装vue-cli。(确定保障您有node和npm)

npm i -g vue-cli

然后创立三个webpack项目还要下载注重

vue init webpack vue-tutorial

web前端 7

cd vue-tutorial

npm i

继之使用 npm run dev 在热加载中运营大家的利用

这一行命令代表着它会去找到 package.json 的 scripts 对象,实行 node
bulid/dev-server.js
。在那文件里,配置了Webpack,会让它去编写翻译项目文件,并且运营服务器,我们在
localhost:8080 就能够查看大家的利用。

web前端 8

这么些都筹划好后,大家需求为大家的路由、XHRAV4请求、数据管理下载八个库,我们能够从vue的官方网址中找到她们。此外我们选取bootstrap 作为本人的UI库

npm i vue-resource vue-router vuex
bootstrap –save

初始化(main.js)

查看大家的行使文本,大家能够在src目录下找到 App.vue 和 main.js 。
main.js将会作为大家选择的输入文件而 App.vue
会作为我们运用的初步化组件。先让咱们来宏观下 main.js

// src/main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'

import App from './App'
import Home from './components/Home'
import 'bootstrap/dist/css/bootstrap.css'

Vue.use(VueRouter)
Vue.use(VueResource)

const routes = [{
 path : '/',
 component : Home
},{
 path : '/home',
 component : Home
}];

const router = new VueRouter({
 routes
});

/* eslint-disable no-new */
// 实例化我们的Vue
var app = new Vue({
 el: '#app',
 router,
 ...App,
});

那有多个与1.0不一的地点

一、 vue-router
路由的参数由对象统一改为了数组要小心。还应该有则是实例化vue的el
参数已经不可能安装 html 和 body 了,因为在 vue2 中是会交替我们钦赐的标签

二、大家亟须在实例化vue的时候钦点渲染什么组件,从前我们是通过路由来钦点如router.start(App,
‘#app’) ,而在vue第22中学则无需了

能够开掘大家在 main.js 里使用了五个零部件 App.vue 和 Home.vue
,稍后让我们具体贯彻它们的剧情。

而小编辈的 index.html 只需求保留 <div id=”app”></div>
就能够,大家的Vue在实例化时设置了 el : ‘#app’ 所以会交替那标签,为大家App 组件的剧情

//index.html
<div id="app"></div>

咱俩的开首化就到那甘休了,接下去让我们早先创立组件。

创立首页组件

率先大家在App.vue里为大家的利用写个顶上部分导航。

// src/App.vue

<template>
 <div id="wrapper">
 <nav class="navbar navbar-default">
  <div class="container">
  <a class="navbar-brand" href="#" rel="external nofollow" >
   <i class="glyphicon glyphicon-time"></i>
   计划板
  </a>
  <ul class="nav navbar-nav">
   <li><router-link to="/home">首页</router-link></li>
   <li><router-link to="/time-entries">计划列表</router-link></li>
  </ul>
  </div>
 </nav>
 <div class="container">
  <div class="col-sm-3">

  </div>
  <div class="col-sm-9">
  <router-view></router-view>
  </div>
 </div>
 </div>
</template>

除去大家的 navbar 以外,大家还索要三个 .container
去放大家任何需求体现的音讯。

而且在此地大家要放三个 router-view 标签, vue-router
的切换正是经过那个标签起始显示的。

在那有个与1.0不如的地点

在此以前笔者们得以一贯通过写a标签
然后写v-link属性进行路由跳转,在vue第22中学改为了写<router-link>
标签再写对应属性(to)进行跳转

随即,我们必要创立五个 Home.vue 作为大家的首页

// src/components/Home.vue

<template>
 <div class="jumbotron">
 <h1>任务追踪</h1>
 <p>
  <strong>
  <router-link to="/time-entries">创建一个任务</router-link>
  </strong>
 </p>
 </div>
</template>

不出意外的话,你能够望见如下效果

web前端 9

创办侧边栏组件

方今我们首页右侧还会有一块空白,大家须要它放下三个侧面栏去总括全体安顿的总时间。

// src/App.vue

 //...

 <div class="container">
 <div class="col-sm-3">
  <sidebar></sidebar>
 </div>
 <div class="col-sm-9">
  <router-view></router-view>
 </div>
 </div>

 //...

<script>
 import Sidebar from './components/Sidebar.vue'

 export default {
 components: { 'sidebar': Sidebar },
 }
</script>

在 Sidebar.vue 大家要求通过store去取得总时间,大家的总时间是共享的数据

// src/components/Sidebar.vue
<template>
 <div class="panel panel-default">
 <div class="panel-heading">
  <h1 class="text-center">已有时长</h1>
 </div>

 <div class="panel-body">
  <h1 class="text-center">{{ time }} 小时</h1>
 </div>

 </div>
</template>

<script>
 export default {
 computed: {
  time() {
   return this.$store.state.totalTime
  }
  }
 }
</script>

成立安插列表组件

接下来大家须要去成立大家的大运追踪列表。

// src/components/TimeEntries.vue

<template>
 <div>
 //`v-if`是vue的一个指令
 //`$route.path`是当前路由对象的路径,会被解析为绝对路径当
 //`$route.path !== '/time-entries/log-time'`为`true`是显示,`false`,为不显示。
 //to 路由跳转地址
 <router-link
  v-if="$route.path !== '/time-entries/log-time'"
  to="/time-entries/log-time"
  class="btn btn-primary">
  创建
 </router-link>

 <div v-if="$route.path === '/time-entries/log-time'">
  <h3>创建</h3>
 </div>

 <hr>

 <router-view></router-view>

 <div class="time-entries">
  <p v-if="!plans.length"><strong>还没有任何计划</strong></p>

  <div class="list-group">
  <--
  v-for循环,注意参数顺序为(item,index) in items
  -->
  <a class="list-group-item" v-for="(plan,index) in plans">
   <div class="row">
   <div class="col-sm-2 user-details">

   <--
   `:src`属性,这个是vue的属性绑定简写`v-bind`可以缩写为`:`
    比如a标签的`href`可以写为`:href`
   并且在vue的指令里就一定不要写插值表达式了(`:src={{xx}}`),vue自己会去解析
   -->

    <img :src="plan.avatar" class="avatar img-circle img-responsive" />
    <p class="text-center">
    <strong>
     {{ plan.name }}
    </strong>
    </p>
   </div>

   <div class="col-sm-2 text-center time-block">
    <h3 class="list-group-item-text total-time">
    <i class="glyphicon glyphicon-time"></i>
    {{ plan.totalTime }}
    </h3>
    <p class="label label-primary text-center">
    <i class="glyphicon glyphicon-calendar"></i>
    {{ plan.date }}
    </p>
   </div>

   <div class="col-sm-7 comment-section">
    <p>{{ plan.comment }}</p>
   </div>

   <div class="col-sm-1">
    <button
    class="btn btn-xs btn-danger delete-button"
    @click="deletePlan(index)">
    X
    </button>
   </div>

   </div>
  </a>

  </div>
 </div>
 </div>
</template>

至于template的说明,都写在一起了,再看看我们的 script

// src/components/TimeEntries.vue

<script>
 export default {
  name : 'TimeEntries',
  computed : {
   plans () {
   // 从store中取出数据
   return this.$store.state.list
   }
  },
  methods : {
   deletePlan(idx) {
   // 稍后再来说这里的方法
   // 减去总时间
   this.$store.dispatch('decTotalTime',this.plans[idx].totalTime)
   // 删除该计划
   this.$store.dispatch('deletePlan',idx)
   }
  }
 }
</script>

别忘了为大家的零件写上有个别急需的体裁

// src/components/TimeEntries.vue

<style>
 .avatar {
 height: 75px;
 margin: 0 auto;
 margin-top: 10px;
 margin-bottom: 10px;
 }
 .user-details {
 background-color: #f5f5f5;
 border-right: 1px solid #ddd;
 margin: -10px 0;
 }
 .time-block {
 padding: 10px;
 }
 .comment-section {
 padding: 20px;
 }
</style>

既然如此大家的数据是共享的,所以大家须要把多少存在 store 里

咱俩在src下开创个目录为 store

在 store 下分别创造4个js文件 actions.js , index.js , mutation-types.js ,
mutations.js

看名字也就精晓这4个分别是做吗用的了,提出大家多读书阅读 vuex
的文书档案,多姿势多动手施行,慢慢的也就会通晓了。

// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

// 先写个假数据
const state = {
 totalTime: 0,
 list: [{
 name : '二哲',
 avatar : 'https://sfault-avatar.b0.upaiyun.com/147/223/147223148-573297d0913c5_huge256',
 date : '2016-12-25',
 totalTime : '6',
 comment : '12月25日完善,陪女朋友一起过圣诞节需要6个小时'
 }]
};

export default new Vuex.Store({
 state,
})

是因为新扩充了页面和store 在我们的入口js文件里安插下

// src/main.js
import store from './store'
import TimeEntries from './components/TimeEntries.vue'
//...

const routes = [{
 path : '/',
 component : Home
},{
 path : '/home',
 component : Home
},{
 path : '/time-entries',
 component : TimeEntries,
}];

var app = new Vue({
 el: '#app',
 router,
 store,
 ...App,
});

不出意外的话,你能够在 /time-entries 路由下看见那样的页面

web前端 10 

透过 vue-Devtools
大家得以窥见我们的store已经协会好了并且成功从store获取了数据

成立职责组件

这么些相比较简单大家直接交给代码

// src/components/LogTime.vue

<template>
 <div class="form-horizontal">
 <div class="form-group">
  <div class="col-sm-6">
  <label>日期</label>
  <input
   type="date"
   class="form-control"
   v-model="date"
   placeholder="Date"
  />
  </div>
  <div class="col-sm-6">
  <label>时间</label>
  <input
   type="number"
   class="form-control"
   v-model="totalTime"
   placeholder="Hours"
  />
  </div>
 </div>
 <div class="form-group">
  <div class="col-sm-12">
  <label>备注</label>
  <input
   type="text"
   class="form-control"
   v-model="comment"
   placeholder="Comment"
  />
  </div>
 </div>
 <button class="btn btn-primary" @click="save()">保存</button>
 <router-link to="/time-entries" class="btn btn-danger">取消</router-link>
 <hr>
 </div>
</template>

<script>
 export default {
  name : 'LogTime',
  data() {
   return {
    date : '',
    totalTime : '',
    comment : ''
   }
  },
  methods:{
   save() {
   const plan = {
    name : '二哲',
    image : 'https://sfault-avatar.b0.upaiyun.com/888/223/888223038-5646dbc28d530_huge256',
    date : this.date,
    totalTime : this.totalTime,
    comment : this.comment
   };
   this.$store.dispatch('savePlan', plan)
   this.$store.dispatch('addTotalTime', this.totalTime)
   this.$router.go(-1)
   }
  }
 }
</script>

本条组件很简短就3个input输入而已,然后就四个按键,保存我们就把数量push进我们store的列表里

LogTime 属于大家 TimeEntries
组件的三个子路由,所以大家依然需求布置下大家的路由,并且采取webpack让它懒加载,收缩大家首屏加载的流量

// src/main.js
//...
const routes = [{
 path : '/',
 component : Home
},{
 path : '/home',
 component : Home
},{
 path : '/time-entries',
 component : TimeEntries,
 children : [{
 path : 'log-time',
 // 懒加载
 component : resolve => require(['./components/LogTime.vue'],resolve),
 }]
}];

//...

vuex部分

在vue2.0中裁撤了利用事件的章程展开通讯,所以在小品种中大家得以应用伊芙nt
Bus,别的最佳都施用vuex,本文我们运用Vuex来兑现数据通讯

深信不疑你刚刚已经看见了自己写了重重 this.$store.dispatch(‘savePlan’, plan)
类似那样的代码,大家再一次汇合验证。

周详想想一下,大家须求多个全局数据,一个为具有布置的总时间,二个是布置列表的数组。

src/store/index.js 没啥太多可介绍的,其实正是传播大家的 state ,
mutations, actions
来伊始化大家的Store。假使有要求的话大家还恐怕必要成立大家的
getter在本例中就不用了。

随着大家看 mutation-types.js
,既然想很猛烈明白多少,这就应该有如何的操作看起,当然那也看个人口味哈

// src/store/mutation-types.js

// 增加总时间或者减少总时间
export const ADD_TOTAL_TIME = 'ADD_TOTAL_TIME';
export const DEC_TOTAL_TIME = 'DEC_TOTAL_TIME';

// 新增和删除一条计划
export const SAVE_PLAN = 'SAVE_PLAN';
export const DELETE_PLAN = 'DELETE_PLAN';
// src/store/mutations.js
import * as types from './mutation-types'

export default {
 // 增加总时间
 [types.ADD_TOTAL_TIME] (state, time) {
 state.totalTime = state.totalTime + time
 },
 // 减少总时间
 [types.DEC_TOTAL_TIME] (state, time) {
 state.totalTime = state.totalTime - time
 },
 // 新增计划
 [types.SAVE_PLAN] (state, plan) {
 // 设置默认值,未来我们可以做登入直接读取昵称和头像
 const avatar = 'https://sfault-avatar.b0.upaiyun.com/147/223/147223148-573297d0913c5_huge256';

 state.list.push(
  Object.assign({ name: '二哲', avatar: avatar }, plan)
 )
 },
 // 删除某计划
 [types.DELETE_PLAN] (state, idx) {
 state.list.splice(idx, 1);
 }
};

最后对应看我们的 actions 就很掌握了

// src/store/actions.js

import * as types from './mutation-types'

export default {
 addTotalTime({ commit }, time) {
 commit(types.ADD_TOTAL_TIME, time)
 },
 decTotalTime({ commit }, time) {
 commit(types.DEC_TOTAL_TIME, time)
 },
 savePlan({ commit }, plan) {
 commit(types.SAVE_PLAN, plan);
 },
 deletePlan({ commit }, plan) {
 commit(types.DELETE_PLAN, plan)
 }
};

大家的 actions 其实就是去接触事件和散布参数啦

加了那四个文本后咱们的store终于完全了,更新下大家的代码

// src/store/index.js 完整代码

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './actions'

Vue.use(Vuex);

const state = {
 totalTime: 0,
 list: []
};

export default new Vuex.Store({
 state,
 mutations,
 actions
})

this.$store.dispatch(‘savePlan’, plan) 当试行了那样的办法就能调用
actions.js 里的 savePlan 方法,而 savePlan 又会触发 mutations 里的
types.SAVE_PLAN 最终修改数据视图更新

PS:在那有个技能正是,在 mutations 里都以用小写下划线连接,而大家的
actions 里都用小写驼峰对应。

个人精通那实际上就是二个宣布订阅的情势

mutation-types 记录大家富有的事件名

mutations 注册大家各类数码变化的方式

actions 则足以编写制定异步的逻辑也许是一对逻辑,再去 commit
我们的事件

设若有 getter 大家得以把一些急需管理回来的数据放在那就可以,不举办作业操作

最终别忘了在我们的 main.js 里使用我们的 store

// src/store/main.js

import store from './store'
// ...

var app = new Vue({
 el: '#app',
 router,
 store,
 ...App,
});

开班体验下你和谐的天职安排板吧!

最后

经过本文,大家得以学学到广大关于vue的本性。

1.了解了vue-cli脚手架

2.伊始对webpack有了部分明白和认得

3.怎么着用.vue喜悦的支出

4.行使vuex进行零部件通讯

5.路由(子路由)的应用

6.用到 vue-devtools 观看我们的多少

民用网址 :

github地址: …

如上便是本文的全体内容,希望对我们的上学抱有辅助,也愿意我们多多协理帮客之家。

前言
大家将会挑选接纳部分vue相近的库 vue-cli , vue-router , vue-resource ,
vuex 1.应用vue-cli创设项目…

再就是在这里大家要放一个 router-view 标签, vue-router
的切换正是经过那些标签初阶展现的。

不出意外的话,你能够看见如下效果

加了那四个文件后我们的store终于完全了,更新下大家的代码

只要有 getter 大家得以把有个别索要管理回来的数额放在那就能够,不举行工作操作

安装

4.利用vue-resource请求大家的node服务端

不出意外的话,你能够在 /time-entries 路由下看见那样的页面

品种的预备干活:

vuex部分

这个都筹划好后,大家需求为大家的路由、XH牧马人请求、数据管理下载多个库,大家能够从vue的官方网站中找到她们。其余大家选拔bootstrap 作为笔者的UI库

创造侧边栏组件

this.$store.dispatch(‘savePlan’, plan) 当实践了那般的不二秘籍就能够调用
actions.js 里的 savePlan 方法,而 savePlan 又会触发 mutations 里的
types.SAVE_PLAN 最终修改数据视图更新

web前端 11

大家的 actions 其实就是去接触事件和传布参数啦

然后成立一个webpack项目同有的时候间下载依赖

3.Vue也为大家提供了CSS预管理,所以大家能够挑选在.vue文件里写LESS或许SASS去顶替原生CSS。

4.使用vuex进行零部件通讯

mutation-types 记录大家具备的事件名

随即,大家需求创设一个 Home.vue 作为大家的首页

那几个组件很简短就3个input输入而已,然后就多少个按键,保存我们就把数据push进我们store的列表里

聊到底对应看大家的 actions 就很驾驭了

mutations 注册我们种种数码变化的不二法门

// src/main.js
//...
const routes = [{
 path : '/',
 component : Home
},{
 path : '/home',
 component : Home
},{
 path : '/time-entries',
 component : TimeEntries,
 children : [{
 path : 'log-time',
 // 懒加载
 component : resolve => require(['./components/LogTime.vue'],resolve),
 }]
}];

//...

vue init webpack vue-tutorial

仿效项目地址:vue2.0创设单页应用最好实战

随即大家看 mutation-types.js
,既然想很显眼精通多少,那就应当有啥的操作看起,当然那也看个人口味哈

末尾别忘了在大家的 main.js 里使用大家的 store

大家的起头化就到那停止了,接下去让大家开端创办组件。

cd vue-tutorial

web前端 12

3.储备一些webpack知识

// src/store/actions.js

import * as types from './mutation-types'

export default {
 addTotalTime({ commit }, time) {
 commit(types.ADD_TOTAL_TIME, time)
 },
 decTotalTime({ commit }, time) {
 commit(types.DEC_TOTAL_TIME, time)
 },
 savePlan({ commit }, plan) {
 commit(types.SAVE_PLAN, plan);
 },
 deletePlan({ commit }, plan) {
 commit(types.DELETE_PLAN, plan)
 }
};

第一大家在App.vue里为大家的选拔写个顶端导航。

// src/App.vue

 //...

 <div class="container">
 <div class="col-sm-3">
 <sidebar></sidebar>
 </div>
 <div class="col-sm-9">
 <router-view></router-view>
 </div>
 </div>

 //...



<script>
 import Sidebar from './components/Sidebar.vue'

 export default {
 components: { 'sidebar': Sidebar },
 }
</script>

1.了解vue2.0

// src/components/LogTime.vue

<template>
 <div class="form-horizontal">
 <div class="form-group">
 <div class="col-sm-6">
 <label>日期</label>
 <input
 type="date"
 class="form-control"
 v-model="date"
 placeholder="Date"
 />
 </div>
 <div class="col-sm-6">
 <label>时间</label>
 <input
 type="number"
 class="form-control"
 v-model="totalTime"
 placeholder="Hours"
 />
 </div>
 </div>
 <div class="form-group">
 <div class="col-sm-12">
 <label>备注</label>
 <input
 type="text"
 class="form-control"
 v-model="comment"
 placeholder="Comment"
 />
 </div>
 </div>
 <button class="btn btn-primary" @click="save()">保存</button>
 <router-link to="/time-entries" class="btn btn-danger">取消</router-link>
 <hr>
 </div>
</template>

<script>
 export default {
 name : 'LogTime',
 data() {
 return {
 date : '',
 totalTime : '',
 comment : ''
 }
 },
 methods:{
 save() {
 const plan = {
 name : '二哲',
 image : 'https://sfault-avatar.b0.upaiyun.com/888/223/888223038-5646dbc28d530_huge256',
 date : this.date,
 totalTime : this.totalTime,
 comment : this.comment
 };
 this.$store.dispatch('savePlan', plan)
 this.$store.dispatch('addTotalTime', this.totalTime)
 this.$router.go(-1)
 }
 }
 }
</script>
//index.html
<div id="app"></div>

npm i -g vue-cli

最后

npm i

看名字也就知道那4个分级是做什么用的了,建议我们多读书阅读 vuex
的文书档案,多姿势多入手实行,渐渐的也就能够驾驭了。

actions 则足以编写制定异步的逻辑或许是部分逻辑,再去 commit
大家的轩然大波

初叶体验下你和睦的天职布置板吧!

全面思考一下,大家需求多少个全局数据,二个为具备安排的总时间,一个是安插列表的数组。

深信您刚好已经看见了自己写了不胜枚举 this.$store.dispatch(‘savePlan’, plan)
类似那样的代码,我们再一次统一验证。

2.打听部分ES6

3.什么样用.vue欢跃的付出

民用精通那实则正是五个揭露订阅的格局

web前端 13

// src/store/index.js 完整代码

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './actions'

Vue.use(Vuex);

const state = {
 totalTime: 0,
 list: []
};

export default new Vuex.Store({
 state,
 mutations,
 actions
})

这一行命令代表着它会去找到 package.json 的 scripts 对象,执行 node
bulid/dev-server.js
。在那文件里,配置了Webpack,会让它去编写翻译项目文件,并且运营服务器,大家在
localhost:8080 就能够查看大家的应用。

创立陈设列表组件

除去大家的 navbar 以外,大家还要求三个 .container
去放我们其余要求出示的音讯。

在 Sidebar.vue 大家需求通过store去获取总时间,大家的总时间是共享的数量

一、 vue-router
路由的参数由对象统一改为了数组要小心。还大概有则是实例化vue的el
参数已经不能够设置 html 和 body 了,因为在 vue2 中是会交替大家内定的价签

2.采用vue-router完成单页路由

时下大家首页左侧还会有一块空白,大家需求它放下八个侧面栏去总计全数布置的总时间。

PS:在那有个技巧正是,在 mutations 里皆以用小写下划线连接,而小编辈的
actions 里都用小写驼峰对应。

// src/components/Home.vue

<template>
 <div class="jumbotron">
 <h1>任务追踪</h1>
 <p>
 <strong>
 <router-link to="/time-entries">创建一个任务</router-link>
 </strong>
 </p>
 </div>
</template>

npm i vue-resource vue-router vuex
bootstrap –save

github地址: …

我们将会选择选取一些vue周围的库 vue-cli , vue-router , vue-resource ,
vuex

先前大家能够直接通过写a标签
然后写v-link属性实行路由跳转,在vue2中改为了写<router-link>
标签再写对应属性(to)实行跳转

// src/components/TimeEntries.vue

<script>
 export default {
 name : 'TimeEntries',
 computed : {
 plans () {
 // 从store中取出数据
 return this.$store.state.list
 }
 },
 methods : {
 deletePlan(idx) {
 // 稍后再来说这里的方法
 // 减去总时间
 this.$store.dispatch('decTotalTime',this.plans[idx].totalTime)
 // 删除该计划
 this.$store.dispatch('deletePlan',idx)
 }
 }
 }
</script>

末段大家将会营造出八个小demo,不赘述,直接上海教室。

在那有个与1.0不一的地点

1.了解了vue-cli脚手架

既是大家的多寡是共享的,所以大家须求把数据存在 store 里

2.从头对webpack有了有的询问和认知

第一,安装vue-cli。(确定保证您有node和npm)

在 store 下各自成立4个js文件 actions.js , index.js , mutation-types.js ,
mutations.js

如上就是本文的全部内容,希望对大家的读书抱有援救,也指望大家多多辅助脚本之家。

1.行使vue-cli创建项目

1.大家将会选拔webpack去为大家的模块打包,预管理,热加载。假若您对webpack素不相识,它正是可以扶持我们把七个js文件打包为1个入口文件,并且能够达成按需加载。那就表示,大家决不忧虑由于应用太多的组件,导致了过多的HTTP请求,那是可怜有益于产品体验的。但大家并不只是为着那一个而使用webpack,大家须求用webpack去编写翻译.vue文件,假若未有动用一个loader去调换大家.vue文件里的style、js和html,那么浏览器就无法甄别。

创设任务组件

而大家的 index.html 只必要保留 <div id=”app”></div>
就能够,大家的Vue在实例化时设置了 el : ‘#app’ 所以会交替那标签,为我们App 组件的剧情

在vue2.0中撤废了利用事件的法子张开通讯,所以在小品种中大家得以应用伊夫nt
Bus,别的最棒都施用vuex,本文大家运用Vuex来落实数据通讯

别忘了为大家的组件写上有的亟需的体裁

web前端 14

初始化(main.js)

鉴于新添了页面和store 在大家的入口js文件里布署下

// src/store/main.js

import store from './store'
// ...

var app = new Vue({
 el: '#app',
 router,
 store,
 ...App,
});

PS:本文node v6.2.2 npm v3.9.5 vue v2.1.0 vue-router v2.0.3 vuex v2.0.0

那有七个与1.0例外的地方

// src/components/TimeEntries.vue

<template>
 <div>
 //`v-if`是vue的一个指令
 //`$route.path`是当前路由对象的路径,会被解析为绝对路径当
 //`$route.path !== '/time-entries/log-time'`为`true`是显示,`false`,为不显示。
 //to 路由跳转地址
 <router-link
 v-if="$route.path !== '/time-entries/log-time'"
 to="/time-entries/log-time"
 class="btn btn-primary">
 创建
 </router-link>

 <div v-if="$route.path === '/time-entries/log-time'">
 <h3>创建</h3>
 </div>

 <hr>

 <router-view></router-view>

 <div class="time-entries">
 <p v-if="!plans.length"><strong>还没有任何计划</strong></p>

 <div class="list-group">
 <--
 v-for循环,注意参数顺序为(item,index) in items
 -->
 <a class="list-group-item" v-for="(plan,index) in plans">
 <div class="row">
 <div class="col-sm-2 user-details">

 <--
 `:src`属性,这个是vue的属性绑定简写`v-bind`可以缩写为`:`
 比如a标签的`href`可以写为`:href`
 并且在vue的指令里就一定不要写插值表达式了(`:src={{xx}}`),vue自己会去解析
 -->

 <img :src="plan.avatar" class="avatar img-circle img-responsive" />
 <p class="text-center">
 <strong>
  {{ plan.name }}
 </strong>
 </p>
 </div>

 <div class="col-sm-2 text-center time-block">
 <h3 class="list-group-item-text total-time">
 <i class="glyphicon glyphicon-time"></i>
 {{ plan.totalTime }}
 </h3>
 <p class="label label-primary text-center">
 <i class="glyphicon glyphicon-calendar"></i>
 {{ plan.date }}
 </p>
 </div>

 <div class="col-sm-7 comment-section">
 <p>{{ plan.comment }}</p>
 </div>

 <div class="col-sm-1">
 <button
 class="btn btn-xs btn-danger delete-button"
 @click="deletePlan(index)">
 X
 </button>
 </div>

 </div>
 </a>

 </div>
 </div>
 </div>
</template>

继而使用 npm run dev 在热加载中运作大家的选拔

vue-cli+webpack记事本项目利用的是vue-cli2.0里边的项目创设筑工程具webpack

3.用vuex处理大家的数据流

// src/App.vue

<template>
 <div id="wrapper">
 <nav class="navbar navbar-default">
 <div class="container">
 <a class="navbar-brand" href="#" rel="external nofollow" >
 <i class="glyphicon glyphicon-time"></i>
 计划板
 </a>
 <ul class="nav navbar-nav">
 <li><router-link to="/home">首页</router-link></li>
 <li><router-link to="/time-entries">计划列表</router-link></li>
 </ul>
 </div>
 </nav>
 <div class="container">
 <div class="col-sm-3">

 </div>
 <div class="col-sm-9">
 <router-view></router-view>
 </div>
 </div>
 </div>
</template>
// src/store/mutation-types.js

// 增加总时间或者减少总时间
export const ADD_TOTAL_TIME = 'ADD_TOTAL_TIME';
export const DEC_TOTAL_TIME = 'DEC_TOTAL_TIME';

// 新增和删除一条计划
export const SAVE_PLAN = 'SAVE_PLAN';
export const DELETE_PLAN = 'DELETE_PLAN';
// src/store/mutations.js
import * as types from './mutation-types'

export default {
 // 增加总时间
 [types.ADD_TOTAL_TIME] (state, time) {
 state.totalTime = state.totalTime + time
 },
 // 减少总时间
 [types.DEC_TOTAL_TIME] (state, time) {
 state.totalTime = state.totalTime - time
 },
 // 新增计划
 [types.SAVE_PLAN] (state, plan) {
 // 设置默认值,未来我们可以做登入直接读取昵称和头像
 const avatar = 'https://sfault-avatar.b0.upaiyun.com/147/223/147223148-573297d0913c5_huge256';

 state.list.push(
 Object.assign({ name: '二哲', avatar: avatar }, plan)
 )
 },
 // 删除某计划
 [types.DELETE_PLAN] (state, idx) {
 state.list.splice(idx, 1);
 }
};

成立首页组件

通过本文,大家得以学学到众多有关vue的表征。

通过 vue-Devtools
大家能够窥见我们的store已经组织好了并且成功从store获取了数码

// src/components/TimeEntries.vue

<style>
 .avatar {
 height: 75px;
 margin: 0 auto;
 margin-top: 10px;
 margin-bottom: 10px;
 }
 .user-details {
 background-color: #f5f5f5;
 border-right: 1px solid #ddd;
 margin: -10px 0;
 }
 .time-block {
 padding: 10px;
 }
 .comment-section {
 padding: 20px;
 }
</style>

src/store/index.js 没啥太多可介绍的,其实正是流传大家的 state ,
mutations, actions
来开头化大家的Store。假如有须要的话大家还恐怕须要创设大家的
getter在本例中就绝不了。

经常来讲,当我们修改了代码刷新页面,那应用里的富有意况就都未有了。那对于开垦二个单页应用来讲是这几个伤心的,因为要求再行在跑一回流程。假如有模块热加载,当您改改了代码,你的代码会直接修改,页面并不会刷新,所以状态也会被保留。

您也许感兴趣的小说:

  • 详解vue-cli + webpack
    多页面实例配置优化措施
  • 详解webpack+vue-cli项目打包技术
  • vue-cli webpack
    开拓景况跨域详解
  • windows下vue-cli及webpack搭建筑和安装装情况
  • 详解用vue-cli来搭建vue项目和webpack
  • vue-cli的webpack模板项目布置文件分析
  • vue-cli与webpack管理静态资源的主意及webpack打包的坑

2.模块热加载是webpack的四个万分碉堡的风味,将会为大家的单页应用带来巨大的便民。

6.应用 vue-devtools 观看我们的数目

5.使用.vue文件举行组件化的开荒

// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

// 先写个假数据
const state = {
 totalTime: 0,
 list: [{
 name : '二哲',
 avatar : 'https://sfault-avatar.b0.upaiyun.com/147/223/147223148-573297d0913c5_huge256',
 date : '2016-12-25',
 totalTime : '6',
 comment : '12月25日完善,陪女朋友一起过圣诞节需要6个小时'
 }]
};

export default new Vuex.Store({
 state,
})

村办网址 :

4.我们过去普通要求动用npm下载一堆的重视,可是未来大家得以选择Vue-cli。那是三个vue生态系统中一个传奇人物创举。那代表大家无需手动构建大家的门类,而它就能够快速地为大家转换。

关于template的讲明,都写在一块儿了,再看看大家的 script

// src/main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'

import App from './App'
import Home from './components/Home'
import 'bootstrap/dist/css/bootstrap.css'

Vue.use(VueRouter)
Vue.use(VueResource)

const routes = [{
 path : '/',
 component : Home
},{
 path : '/home',
 component : Home
}];

const router = new VueRouter({
 routes
});

/* eslint-disable no-new */
// 实例化我们的Vue
var app = new Vue({
 el: '#app',
 router,
 ...App,
});

下一场大家须求去创立我们的时间追踪列表。

翻开大家的行使文本,大家能够在src目录下找到 App.vue 和 main.js 。
main.js将会作为大家运用的进口文件而 App.vue
会作为我们选择的起头化组件。先让大家来宏观下 main.js

能够窥见我们在 main.js 里使用了多个零件 App.vue 和 Home.vue
,稍后让我们具体落到实处它们的开始和结果。

LogTime 属于大家 TimeEntries
组件的二个子路由,所以大家照例需求配备下大家的路由,并且动用webpack让它懒加载,收缩大家首屏加载的流量

// src/components/Sidebar.vue
<template>
 <div class="panel panel-default">
 <div class="panel-heading">
 <h1 class="text-center">已有时长</h1>
 </div>

 <div class="panel-body">
 <h1 class="text-center">{{ time }} 小时</h1>
 </div>

 </div>
</template>

<script>
 export default {
 computed: {
 time() {
 return this.$store.state.totalTime
 }
 }
 }
</script>

那些相比轻便大家直接付出代码

web前端 15

// src/main.js
import store from './store'
import TimeEntries from './components/TimeEntries.vue'
//...

const routes = [{
 path : '/',
 component : Home
},{
 path : '/home',
 component : Home
},{
 path : '/time-entries',
 component : TimeEntries,
}];

var app = new Vue({
 el: '#app',
 router,
 store,
 ...App,
});

二、大家亟须在实例化vue的时候钦定渲染什么组件,此前作者们是经过路由来钦命如router.start(App,
‘#app’) ,而在vue第22中学则没有供给了

5.路由(子路由)的应用

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 澳门新葡亰官网app 版权所有