Vue知乎项目总结

发表于

vue-cli框架

  • 根据官网操作建立vue脚手架，主要有带有轮播图的首页，列表页，以及详情页，用到的有vuex,vue-touter,axios

    vuex

  • 项目最开始时候没有用到vuex，到后来感觉状态有些难控制，就使用了，vuex真的强大。
    建立一个store，所有不同组件下的可变状态都由store统一管理，
    首先在入口文件全局注册vuex，使用Vue.use(vuex)即可在全局状态下使用vuex，要想改变store里边的状态，只有在methods里边显式的提交mutation，使用this.$store.commit(‘**    ‘{}),可带有参数，在哪里想要获取这个状态，只需在computed里边使用this.$store.state.来获取状态
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    import Vuex from 'vuex'
    import Vue from 'vue'
    import {getContent} from '../server9999.js'
    import {getTitle} from '../server9999.js'
    Vue.use(Vuex)
    const store=new Vuex.Store({
        state:{
    	    idmsg:[],
    	    message:'',
    	    css:[],
    	    name:[]
    	},
    	mutations:{
    		GETID(state,id){
    			getContent(id).then((res)=>{
    				state.idmsg=res
    			})
    		},
    		GETNAME(state,name){
                state.name=name
    		},
    		GETMESSAGE(state,id){
    			getTitle(id).then((res)=>{
    				var getcss=res.css;
    				var cssList=getcss.map((item)=>{
    					return `<link rel="stylesheet" href="${item}"/>`;
    			    });
                    var getbody=res.body;
                    var all=cssList+getbody;
    				state.message=all
    				
    			})
    		}
    	}
    })
    export default store

vue-router使用

** 单页面应用程序势必会用到router，vue-router很强大，使用vue-router只需引入即可，然后对router进行配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
	import Counter from '../components/Counter.vue'
	import Pagec from '../components/Pagec.vue'
	import View from '../components/View.vue'
	var routes =[
	    {
	    	path:'/',
	    	component:Counter
	    },{
	    	path:'/content',
	    	component:Pagec
	    },{
	    	path:'/view',
	    	component:View
	    }]
export default new Router({
	routes,
	mode:'hash'
})

axios

  • 主要用axios采取数据请求；
    1
    2
    3
    axiso(url).then(res=>{
       //res
    })