Vue2.0项目实战语法

一、安装配置依赖

 

1） vue init webpack-simple 项目名称    

2） cnpm install

3 )  npm run dev

4 )  cnpm install vuex vue-router axios -D

5 )  cnpm install style-loader css-loader -D

     6 )  需要在webpack.config.js中加入

         {

        test: /\.css$/,

        loader: 'style-loader!css-loader'

         }

 7 )  

 

 

二、做vue项目流程

 

1） 规划组件结构 （Nav.vue、Header.vue、Home.vue）

2） 编写路由（vue-router）

3 )  编写具体每个组件的功能

 

 

三、项目结构

 

1） 在src中建立components存放组件的文件夹

2） assets存放

 

 

四、组件篇-comonents

 

1） 在src中建立components存放组件的文件夹

2） 在components中建立*.vue文件

3 )  在App.vue中导入*.vue （import NavView from './components/Nav.vue'）

4 )  export default{

       components:{

           NavView

      }

     }

5） 在template中显示

         <div id="app">

            <NavView></NavView>

         </div>

 

五、路由篇-router

 

1） 在需要跳转的地方，加入<router-link>

         to：路由地址，tab是会自动在a标记的上一层生成li，active-class高亮的class设置

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

                    <a href="#">首页</a>

                </router-link>

2）  在要显示的地方路由切换内容的地方放入，<router-view>

3）  在main.js中引入

          import VueRouter from 'vue-router';

          import RouterConfig from './router.config.js'  //配置router的参数文件

          Vue.use(VueRouter);

          new Vue({

             el: '#app',

              router,

              render: h => h(App)

          });

          const router = new VueRouter({

mode:'history',

 scrollBehavior:() =>({y:0}),  //切换路由的时候，内容都从顶上开始读

    routes:RouterConfig

})

4）  在src中建立一个router.config.js文件

5）  router.config.js完善里面的配置

          import Home from './components/Home.vue'

          import Follow from './components/Follow.vue'

          import Column from './components/Column.vue'

export default[

    {

        path:'/home',

        component:Home

    },

     {

        path:'/follow',

        component:Follow

    },

     {

        path:'/column',

        component:Column

    },{

        path:'/',

        redirect:'/home'       //默认跳转到首页

    },{

        path:'*',

        redirect:'/home'       //404默认页面

    }

]

 

 

六、vuex状态管理

 

1） 在src下建立store文件夹 √

2） 在store中建立index.js √

         import Vue from 'vue'

         import Vuex from 'vuex'

         Vue.use(Vuex)

         import mutations from './mutations'

         import actions from './actions'

        export default new Vuex.Store({

    modules:{

        mutations

    },

    //把actions导出去

    actions

})

3） 在main.js加入vuex的代码 √

         import Vue from 'vue'

import App from './App.vue'

import VueRouter from 'vue-router'

import RouterConfig from './router.config.js'

import store from './store/'   //默认会找到store文件的index.js

Vue.use(VueRouter)

 

const router = new VueRouter({

    mode:'history',

    routes:RouterConfig

})

 

new Vue({

  el: '#app',

  router,

  store,

  render: h => h(App)

})

4） 在store中新建一个actions.js √

 export default{

    showHeader:({commit})=>{

       //需要有types.js,但是这个项目去掉了types.js

       commit('showHeader')  //commit到了mutations里面去了

    },

    hideHeader:({commit})=>{

       //需要有types.js,但是这个项目去掉了types.js

       commit('hideHeader')  //commit到了mutations里面去了

    },

}

5） 在store中新建一个mutations.js √

import getters from './getters'

const state = {

    header:true //以上来是ture

}

const mutations = {

    showHeader(state){

       state.header = true

    },

    hideHeader(state){

       state.header = false

    }

}

export default{

    state,

    mutations,

    getters

}

6） 在store中新建一个getters.js √

         export default{

    headerShow:(state)=>{

       return state.header;

    }

}

7） 在要触发的地方，加入代码App.vue √

         <NavView v-show="'headerShow'"></NavView>

         import {mapGetters, matpActions} from 'vuex'

         computed:mapGetters([

           'headerShow'

          ]),

8） 在App.vue中的exprot中加入监听路由的变化的代码 √

         watch:{

      $route(to,from){

         if(to.path=='/user-info'){

              //通知actions，状态哪个变量应该消失了为false

              //需要发起，$store是从main.js里的store来的

              //然后需要导出到index.js里

              this.$store.dispatch('hideHeader')   //发出去之后actions.js接收

         }else{

             this.$store.dispatch('showHeader')

         }

      }

    }

 

 

 

七、数据交互篇-axios

 

     1 ) 在main.js进入axios

        import axios from 'axios'

        //关于axios配置

//1.配置发送请求的信息

axios.interceptors.request.use(function (config){

   store.dispatch('showLoading')

   return config;

},function(error){

   return Promise.reject(error)

})

//2.配置请求回来

axios.interceptors.response.use(function (response){

   store.dispatch('hideLoading')

   return response;

},function(error){

   return Promise.reject(error)

})

//把axios对象挂到Vue原型上

Vue.prototype.$http = axios

2） 在Home.vue中加入数据交互代码

      export default {

        data(){

            return{

                arrList:[]

            }

        },

        components:{

            BannerView

        },

        mounted(){

            //获取数据

            this.fetchDate()

        },

        methods:{

            fetchDate(){

                var _this = this;

                this.$http.get('src/data/index.data').then(function(res){

                   _this.arrList.push = res.data

                }).catch(function(err){

                    console.log('Home',err)

                })

            }

        }

    }

 

 

八、文章的详情页制作篇

 

     1 ) 在home.vue路由跳转代码中加入

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

              <h2>{{item.title}}</h2>

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

           </router-link>

     2）在router.config.js中写上相应的路由配置

            {

              path:'/article/:id',

              component:Article

            }

     3）在详情页article.vue接收参数，回显数据

         data(){

          return {

              articleData:[ ]

          }

      },

      mounted(){

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

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

          this.fetchData(id); //获取路由的id，放出数据交互函数

      },

      methods:{

          fetchData(id){

              var _this = this;

              this.$http.get('../src/data/article.data').then(function(res){

                 console.log(res.data[id-1])

              }).catch(function(err){

                  console.log('文章详情页',err)

              })

          }

      }

 3）解决data里有html和样式的情况

<p v-html="articleData.content"></p>

      4 ) 显示图片

         <img :src="articleData.author_face">

      5）如何处理时间戳

         建立一个文件夹为filters过滤器，在2.0就只能自己写过滤器了

         {{articleData.time | normalTime}}

          filters:{

          normalTime:function(val){

               var oDate=new Date();

               oDate.setTime(val);

               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;

          }

       }

         因为会有很多的过滤器，所以在filters文件夹下建立一个index.js，和normalTime.js

         index.js

         import {normalTime} from './normalTime'

module.exports = {

    normalTime

}

normalTime.js

export const normalTime=(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中，全局引入

import filters from './filters'

 

 

九、过渡动画篇

 

 1 ) 在App.vue中，修改代码

    <transition name="slide-down">

      <router-view></router-view>

    </transition>

 2）在css中加入样式

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

  transition: all .4s ease;

  opacity: .7;

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

}

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

  opacity: .1;

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

}

 

 

十、语法篇

 

     1 ) 在style标签中导入其他css    @import './assets/css/index.css'

       （目前同一个文件离引入两个css就报错了）

    解决他在是在main.js，用require(‘./assets/css/base.css’) 全局引用

2）

 

 

十一、项目注意与优化

 

1） 第三方库的js或者是css，最好用link和script在index.html中引入，避免打包的时候太大

2） axios是不能直接use的

3） index.html引入的连接地址需要写绝对路径

         <script src="http://localhost:8080/src/assets/js/rem.min.js"></script>

4） 返回按钮的处理

          <a href="#" onclick="window.history.go(-1)">返回</a>

     5 ) 如何在vue里使用jquery

        在main.js中加入 import $ from ‘./jquery.min.js’即可