vue 项目规划

1 规划组件结构

项目结构

node_moudules

src下

     assets

     components

     data(数据)

     filters

              index.js   导出所有的过滤器

                   import {nomalTime} from "./nomalTime"

                  export default {

                 nomalTime,

                 a

              

                                                  }

              nomalTime.js

                    export const  nomalTime=(time)=>{

if(time){

var oDate=new Date();

oDate.setTime(time)

var y=oDate.getFullYear();

var m=oDate.getMonth()+1;

var d=oDate.getDate();

var h=oDate.getHours();

var mm=oDate.getMinutes();

var s=oDate.getSeconds();

return y+'-'+m+'-'+d+' '+h+':'+mm+':'+s;

}

//这个过滤器要在main.js中使用  首先需要引入我们过滤器

                                                                         }

     store

     App.vue

   这个下面去做动画 用transition 包裹中我们运动的组件部分

<transition name="slide-down">

<keep-alive>

        <router-view class="router-view"></router-view>

      </keep-alive>

</transition>

style 中定义css样式

<style>

.slide-up-enter-active, .slide-up-leave-active {

 transition: all .4s cubic-bezier(0, 1.2, 1, 0.5);

 opacity: .7;

 transform: translate3d(0, 4em, 0);

}

.slide-up-enter, .slide-up-leave-active {

 opacity: .3;

 transform: translate3d(0, 4em, 0);

}

.slide-down-enter-active, .slide-down-leave-active {

 transition: all .4s cubic-bezier(0, 1.2, 1, 0.5);

 opacity: .7;

 transform: translate3d(0, 6em, 0);

}

.slide-down-enter, .slide-down-leave-active {

 opacity: .1;

 transform: translate3d(0, 6em, 0);

}

.slide-left-enter-active, .slide-left-leave-active {

 transition: all .2s cubic-bezier(0, 1.2, 1, 0.5);

 opacity: .5;

 transform: translate3d(2em, 0, 0);

}

.slide-left-enter, .slide-left-leave-active {

 opacity: .3;

 transform: translate3d(2em, 0, 0);

}

.slide-right-enter-active, .slide-right-leave-active {

 transition: all .4s cubic-bezier(0, 1.2, 1, 0.5);

 opacity: .5;

 transform: translate3d(5em, 0, 0);

}

.slide-right-enter, .slide-right-leave-active {

 opacity: .3;

 transform: translate3d(5em, 0, 0);

}

.fade-enter-active, .fade-leave-active {

 transition: opacity .4s

}

.fade-enter, .fade-leave-active {

 opacity: 0

}

</style>

     main.js

        import filters from "./filters"

        router.config.js

      

    Object.keys(filters).forEach(key => Vue.filter(key, filters[key]))

// es6语法  循环遍历所有的过滤器

  

index.html 

package.json

webpack.config.js

Nav.vue

Header.vue

Home.vue   这个vue 组件中放轮播图 和我们轮播图下面的内容(当然轮播图可以单拿出去做一个单独的vue)

Footer.vue

...

2 编写对应的路由

vue-router

3  具体写每个组件的功能

一些公共的方法js 如jquery插件 一般在index.html中引入

当然也可以在main.js中require或者import

4 需要的下载  cnpm  vuex vue-router axios -D

vuex

vue-router

axios

5 目录表  src 文件夹下内容  下面四部分都是同级的  index.html和src是同级的

assets 静态资源 img  css js 

components  放我们所有的组件

App.vue

<template>

<div id="app">

//这里面的内容变成组件使用

建立nav.vue

<NavView  v-show='headershow' ></NavView>

//头部的导航 是否隐藏

</div>

</template>

<script>

import NavView from "./components/Nav.vue"

//导入组件

import {mapGetters,mapActions}from "vuex"

</script>

<style>

//引入css

@import "./assets/css/index.css"

</style>

首页想显示效果的话

export default{

computed:mapGetters([

"headershow"

//控制显示隐藏

])，

watch:{

//  切换路由的时候，监听路由的变化

$route(to,from){

console.log(to.path)

// 输出的是  /home ....

判断如果我的路由 to.path=="userInfo"  那么我就把头部Nav隐藏  判断中逻辑：

发起dispatch  ///store的逻辑开始

这个this 是main.js中store来的

this.$store.dispatch("showHeader")

this.$store.dispatch("hideHeader")

//发送隐藏的变量

//这个是发送这个变量

发送到action中

}

}

components:{

NavView

//将组件放进来即可  然后再template中加入我们的NavView 标签即可

}

mounted(){

this.slider();

//渲染时执行我的这个函数

},

methods:{

slider(){

放我们的执行逻辑代码

}

}

}

main.js

是组件的话 都需要导出

这里面要写我们路由的逻辑

import VueRouter from "vue-router";

导入我们真正的router逻辑 router.config.js

import routerConfig from"./router.config.js"

import store from "./store"

import App from './App.vue'  这个是主入口

import  axios from "axios"

import  Loading from"./components/loading"

//引入管理数据的store

Vue.use(VueRouter);

Vue.use(Loading);

axios.interceptors.request.use(function (config) {  //配置发送请求的信息

  stores.dispatch('showLoading')  

  return config;

}, function (error) {

  return Promise.reject(error);

});

axios.interceptors.response.use(function (response) { //配置请求回来的信息

//请求数据回来之后我们的loading图就不继续显示 就隐藏

  stores.dispatch('hideLoading')

  return response;

}, function (error) {

  return Promise.reject(error);

});

axios.defaults.baseURL="http://localhost:8080/"

// 设置请求根路径

/*axios.defaults.baseURL = (process.env.NODE_ENV !=='production' ? config.dev.httpUrl:config.build.httpUrl);

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';*/   设置post 头部信息

//axios.defaults.baseURL='http://localhost:8082/';

Vue.prototype.$http=axios;

方便后面的使用

const router=new VueRouter({

// 建立router.config.js 

mode:"history",

scrollBehavior: () => ({ y: 0 }), // 滚动条滚动的行为，不加这个默认就会记忆原来滚动条的位置   每次切换后 滚动条都从头滚动

//不是用的默认的路由#的方式

routes：routerConfig

//前面的routes 千万不要丢了 固定写法写对了   如果const 定义的是routes 那么我们就直接写routes 一个就可以了 但是不一样 就不能那样简便写

});

  new Vue({

el:"#app",

router,

store,

//需要放进来

render:h=>h(App)

})

router.config.js 的建立   和main.js 同级

这个文件中放我们路由的真正逻辑

import Home from "./components/Home.vue"

export default[

{

path:"/home",

component:Home

},

{

path:"/fallow",

component:Fallow

},

{

path:"/column",

component:Column

},

{

path:"/",

redirect:"./home"

//这样就不会跑到组件中了 也有css样式了  路由重定向

},

{

path:"*",

component:Home

//默认跳Home

}

]

6 路由的书写

是在我们的相应的需要路由的页面

xx.vue中写

<ul>

<router-link  to="/home"  tag="li" active-class="active">

<a href="www.baidu.com">首页</a>

</router-link>

</ul>  

把相应的我们的Home.vue 中间的内容改成

<router-view>

//这里面展示我们相应Home.vue的相应内容

</router-view>

7 store 

store 实际管理的是状态变量 显示 消失等等 而不是我们的真正显示数据的变化

store 文件夹下有一个index.js

index.js

import Vue from "vue";

import Vuex  from "vuex";

import actions from "./actions";

import mutations from "./mutations"

Vue.use(Vuex);

export default  new Vuex.store({

modules:{

mutations

},

actions

})

actions.js

export default{

showHeader:({commit})=>{

commit("showHeader")

下一步到mutation中

//需要types

},

hideHeader:({commit})=>{

commit("hideHeader")

下一步到mutation中

//需要types

}

}

types.js

  const 我的变量 

// 这里先省略   直接在action中看

mutations.js

//

import getters from "./getters"

const state={

header:true

}

const mutations={

showHeader(state){

state.header=true;

//操作我上面const的state数据

},

// 这是提交过来的那个变量

hideHeader(state){

state.header=false;

//操作我上面const的state数据

}

}

export default {

state,

mutatations,

getters

}

   getters.js

export default{

headerShow:(state)=>{

return state.header

}

}

//

想使用自己写的Loading组件 需要把它放在src/components 下

8   axios

cnpm install axios -D

main.js中引入

import App from './App.vue'  这个是主入口

import  axios from "axios"

import  Loading from"./components/loading"

Vue.use(Loading);

  然后在 App.vue 中使用我们的loading 

<loading></loading>

main.js

scrollBehavior: () => ({ y: 0 }), // 滚动条滚动的行为，不加这个默认就会记忆原来滚动条的位置

Home.vue中获取数据

export  default{

data(){

return {

arrList:[

]

}

},

components:{

BannnerView

},

mounted(){

//生命周期函数  在这里面获取我们的数据

this.fetchDate();

调用函数执行我们调取数据的操作

},

methods:{

fetchDate(){

//想便捷的使用axios

将axios对象 暴露到Vue的原型上

this  就是Vue new出来的实例

var _this=this;

//这样就不用每次都import 我们axios了

this.$http.get("src/data/index.data").then(function(res){
console.log(res);

_this.arrList=res.data;

//拿到数据之后就是循环绑定

}).catch(function(err){

console.log("Home",err);

})

}

}

}

   在我们的 App.vue NavView 组件下面

写一个keep-alive  这样的话 我们就能保持某种状态 意思是切换的时候 我们不用 重复请求数据  也就不会出现我们的loading 图标

<keep-alive>

<router-view>

//路由模板

</router-view>

</keep-alive>

变成属性才能做字符串连接

包括路由中的to

 <router-link :to="'/article/'+item.id">

                <h2>{{index+1}} . {{item.title}}</h2>

                   <p>{{item.detail}}</p>

               </router-link>

类似于这样的必须加：冒号

mounted (){

这里面可以拿我的路由信息

var reg=/\/article\/(\d+)/

this.$route.path 拿到后面的参数数字 1... 下面的可以得到

var id=this.$route.path.match(reg)[1];

this.fetchDate(id);

//可以知道拿哪篇文章了

}