介绍
项目的创建 创建一个练手的小项目，包含了自定义组件，vue-router，vuex，vue-axios的简单用法创建等。
主要模块
- 路由的设置
- 自定义组件的引入
- vue-axios的使用方式
- vuex实现组件间的通信
先看一下整体的项目，只要实现了列表请求网络接口进行展示以及详情页的展示，以及专题详情页与关于界面的通信。
整体框架如下：
- config文件夹中对项目文件进行设置
- components 组件的文件夹
- router 路由设置文件
- store设置文件
路由的设置
npm install vue-router --save
创建router文件夹饼创建index.js文件。main.js文件中进行设置
import router from './router'
// 设置路由跳转
Vue.prototype.$goRoute = function(index) {
this.$router.push(index)
}
....其他代码
new Vue({
el: '#app',
router, //设置路由
store, //设置store
components: {
App
},
template: '<App/>'
})
然后在index.js中设置路由跳转需要的设置,导入各个模块的头文件并进行设置
mport Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
....
Vue.use(Router)
// 根据引入的头文件设置路由信息
export default new Router({
routes: [{
//设置进入项目显示的根目录 然后根据需求 显示需求设置其他界面的路由设置
path: '/',
name: 'page00',
component: page00
},
.....
]
})
在页面中调用
<router-view></router-view>
然后在需要的地方调用 使用router-link 或者 $goRoute方法进行页面的路透跳转。
其中基本页面跳转和传值跳转的路由设置的举例
类似于Get请求的网址接口一样在路由网址中设置对应的参数字段来进行传值
{
path: '/childrenpage01/:id',
name: 'childrenpage01',
component: childrenpage01
},
{
path: '/page00',
name: 'page00',
component: page00
},
可以看到在childrenpage01中可以传递相关的id到childrenpage01界面中
自定义组件的设置和引入
在项目的效果图中可以看到我们设置了一个头视图组委基础组件，具体实现如下：
<template>
<div>
<div class="zhihu-head">
<div class="m1">知乎日报</div>
<ul class="mt2">
<li class="col">
<router-link class="h5" to="/page00">日报</router-link>
</li>
<li class="col">
<router-link class="h5" to="/page01">专题</router-link>
</li>
<li class="col">
<router-link class="h5" to="/page02">关于</router-link>
</li>
</ul>
</div>
</div>
</template>
我们设置了头的显示并通过router-link设置了对应的界面跳转。
在需要显示的界面中直接引入头文件并直接导入自定义的组件文件
<template>
<div class="page00">
<BaseHead></BaseHead>
<ul>
.... 其他控件显示信息
</ul>
<router-view></router-view>
</div>
</template>
<script >
import BaseHead from '@/components/baseHead'
export default {
name: 'page00',
data () {
return {
}
} ,
components: {
//必须引入组件
BaseHead
}
}
</script>
vue-axios的使用介绍
引入网络请求
cnpm install axios
在config的index.js文件中修改
dev: {
env: require('./dev.env'),
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': { // api为匹配项
target: 'https://news-at.zhihu.com/api/4', // 设置代理目标
changeOrigin: true,
pathRewrite: { // 重写路径
'^/api': '/'
}
}
},
在main.js中引入axios 并设置baseURL
import axios from 'axios'
axios.defaults.baseURL = '/api/';
然后我们就可以去对应的页面做我们想要的网络请求了
mounted() {
//do something after mounting vue instance
this.getFocusLists()
},
methods: {
getFocusLists() {
var vm = this;
this.$http.get('/news/latest').then(function(res){
.....
//得到网络请求的数据信息
})
.catch(function (err) {
console.log(err)
})
}
},
在网络的开源项目中的有的在vuex中对axios的网络请求进行了封装通过store中设置的方法进行界面的刷新和数据的获取。这里我们只是在当前界面进行数据的请求和赋值。
界面的显示中进行数据的绑定并对整个cell实现点击事件跳转到详情页面
<ul>
<li v-for="item in focusList" :key="">
<router-link :to="{name: 'childrenpage00', params: {id: item.id}}" tag="div">
<!-- //这里改变tag="div" 渲染样式可以改变 router-link的激活状态 -->
<!-- <img :src="item.images" alt=""> //图片网址加载不出来 -->
<div class="content">
{{item.title}}
</div>
</router-link>
</li>
</ul>
在router-link中我们可以看到通过params的形式对详情界面进行传值
<router-link :to="{name: 'childrenpage00', params: {id: item.id}}" tag="div">
....
</router-link>
由以上操作我们得到了如下显示界面
并同理得到专题界面的数据进行展示
在对应的详情页中我们同样使用axios 并根据首页中传递过来的id进行网络请求拿到数据后进行显示
<template>
<div class="hello">
<a @click="$goRoute('/page00')">返回上一级</a>
<div v-html= "focusList" ></div>
<router-view></router-view>
</div>
</template>
通过$goRoute进行返回首页的操作，使用v-html来展示得到的html数据信息
vuex实现组件间的通信
如项目效果图01为了练习我们选择 使用专题详情页 与 关于界面之间进行数据传递，在专题的详情页进行数据输入，然后返回第一层级并切换到关于界面中接收数据
cnpm install vuex --save-dev
在个人的理解中store类似于iOS的单利，一个全局的事件管理类，我们可以通过store进行数据的赋值和取值来实现不同组件之间的通信，但是store并不能实现本地的存储，这个本地的存储指的是，如果我刷新了整个项目既相当于重新运行了整个vue项目之后，store中的数据并不能保留下来，如下动态图02 在关于界面我们获取到数据之后刷新界面，数据消失。
如果使用store来保存登录状态，作用域仅在于当前项目中可以验证登陆状态，如果想保存在本地需要使用localStorage来保存数据
在store.js中
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
// 定义状态
state: {
author: '数据还没来这是默认',
}
})
在数据赋值页面的提交事件里
this.$store.state.author = this.inputText //使用赋值的方式直接修改
关于界面中 直接取值这样就实现了最简单的界面之间的数据传递
<template>
<div class="hello">
<BaseHead></BaseHead>
<p> 练习一把store</p>
<div class=""> 来自远方的赋值: {{author}} </div>
<router-view></router-view>
</div>
</template>
....
computed: {
author () {
return this.$store.state.author //初始方法
}
},
....
为了使用vuex我们设置他的其他属性如下
const store = new Vuex.Store({
// 定义状态
state: {
author: '数据还没来这是默认',
passWord: ''
},
mutations: {
newAuthor (state, msg) {
state.author = msg
},
newPassWord (state, msg) {
state.passWord = msg
}
},
actions: {
newAuthor ({
commit
}, status) {
commit('newAuthor', status)
},
newPassWord ({
commit
}, status) {
commit('newPassWord', status)
}
},
getters: {
getAuthor (state) {
return state.author
},
getPassWord (state) {
return state.passWord
}
}
})
其实在简单的事件传递中我们并不需要actions ( actions 只是一个架构性的概念，并不是必须的)，直接操作mutations就可以完成,比如专题页详情的赋值操作
setName: function () {
this.$store.commit('newAuthor' ,this.inputText) //官方推荐 这个是操作mutations
alert('提交成功返回上一级去看看');
}
vuex 真正限制你的只有 mutation 必须是同步的,使用actions可以执行异步操作，在actions执行完之后才进行下一个mutations。
actions方式赋值的使用方法如下：
setName: function () {
this.$store.dispatch('newAuthor',this.inputText)
alert('提交成功返回上一级去看看');
}
getters只是获取其中的一个状态，提供一个获取状态的入口而已。调用方式如下
computed: {
author () {
// return this.$store.state.author //初始方法
return this.$store.getters.getAuthor //获取到了 数值
}
}
这样我们就实现了界面的组件通信。
后记
第一个Vue项目练手，目的是熟悉一下vue的写法以及一些组件的使用和配置方式，希望接下来写出更靠谱的vue小项目。
