一、部署

需要nodejs，全局安装 npm install -g vue-cli ，项目目录执行  vue init webpack firstVue，自己选取ide，推荐westorm/vscode/sublime text其中一个。本地运行执行npm run dev，这里注意本机环境需要有安装过nodejs环境，运行完后在默认浏览器打开一个localhost:8080。

二、更改启动页

更改默认启动页显示内容方式有两种。首先必须说明一下框架默认只有一个html文件，也就是根目录index.html。

1)在根目录下找到src/router-map.js文件，找到启动页配置/，如果要改动默认第一页显示的内容，更改/里面默认显示的vue文件名。

格式参考：

‘/‘: {

   name: ‘index‘,

   component(resolve){

   require([‘./components/Index.vue‘], resolve)

   }

},‘/home‘: {

   name: ‘home‘,

   component(resolve){

   require([‘./components/Home.vue‘], resolve)

   }

}

2) 在根目录下找到src/main.js文件，在router.start(App, ‘#app‘)这句后面可以加上一些js逻辑判断，跳转显示哪个为第一页。

参考格式：

router.go({

   name: ‘home‘

})

三、新增页面

新增页面，也就是新增一个vue文件。在根目录下找到src/components新增一个xx.vue文件。根节点template下只能有一个子节点，不允许多个子节点。

参考格式：

<template>

    <div>

<div>

       </div>

    <div>

       </div>

    </div>

</template>

<script>

    export default{

        data(){

            return {

                //这里设置当前页面的基础变量数据

                msg: ‘hello vue‘

            }

        },

        ready: function(){

//这里可以用data的默认数据更改、初始化、绑定事件

        },

        methods: {

            //事件方法都写在这里

            goTo: function(url){

                this.$router.go({name: url});

            }

        },

        components: {

           //这里是组件，例如你引入Toast，需要在这里注入。

        }

    }

</script>

<style lang="less" scoped>

    @import ‘../styles/home.less‘;

</style>

四、新增样式

新增样式有两种方式，一是直接在vue文件内部，二是引入外部文件。具有 scoped 属性的样式只会应用到当前元素和其子元素。另外需要注意lang，默认不写lang是平常普通的css。

内部方式：

<style lang="less" scoped>

.ok {

   opacity: 1;

    }

</style>

外部方式：

<style lang="less" scoped>

    @import ‘../styles/home.less‘;

</style>

五、组件使用

引入组件，这个举例一个提示组件toast。有3个地方需要注意。

1)引入toast组件的js文件

参考格式：

<script>

   import Scroller from ‘vux/src/components/toast‘;

</script>

2)引入toast组件的样式文件

参考格式：

  <style scoped>

@import ‘../../node_modules/vux/dist/components/toast/style.css‘;

</style>

3)注入toast文件

参考格式

  components: {

     Toast

}

具体说明或其它组件请参照网站说明：https://vuxjs.gitbooks.io/vux/content/

六、第三方库文件

引入外部库文件，用npm管理依赖，例如想引入swiper或者jquery

在根目录下cmd终端下执行npm install swiper –save，安装在项目里面的node_modules 目录，package.json 也会更新，然后用import引入进来。

引入方式可参考引入组件方式。

七、路由问题

路由问题，例如我需要在跳转的时候把id带过去另外一个页面。首先要在router-map.js文件上标明跳转的时候我必须要带上id这个key。

参考格式：

   ‘/caseDetail/:id‘: {

name: ‘caseDetail‘,

component(resolve){

require([‘./components/CaseDetail.vue‘], resolve)

}

}

dom操作方式

<div v-link="{name: ‘caseList‘, params: { id: 123 }}"></div>

js操作方式

this.$router.go({ name: ‘caseDetail‘, params: { id: id } });

如果需要关注router变化做操作，需要在这里去做逻辑处理

参考格式：

route: {

    data() {

      // console.log("============:"+this.$route);

      this.moduleId = this.$route.params.id;

      this.getDetailInfo(this.moduleId);

      }

}

八、接口问题

接口问题，首先需要在根目录下的src/services/services.js声明

参考格式：

import Vue from ‘vue‘

const HOLIKE_REMOTE = ‘http://qj.holike.com‘

export default {

Vue.resource(`${HTTP_REMOTE}/hlkapp/hlk/projectHouse/updateipad`)

}

   然后在vue引入services

   import services from ‘../services/services‘;

   注意是get请求还是post请求

   get请求，参考格式：

   var requestBody = {};

   requestBody.name = this.accountVal; 

   services.login.get(requestBody).then((res) => {

      var data = http://www.mamicode.com/res.body;

      if (data.code == 200) {

          console.log(JSON.stringify(returnData));

      }

   }, (error) => {

      console.log("error:" + error);

   });

   post请求，参考格式：

   var requestBody = {};

   requestBody.name = this.accountVal; 

   services.login.save(requestBody).then((res) => {

      var data = http://www.mamicode.com/res.body;

      if (data.code == 200) {

          console.log(JSON.stringify(returnData));

      }

   }, (error) => {

      console.log("error:" + error);

   });

九、接口拦截器

增加接口拦截器，在根目录下找到src/main.js文件，可以在router.map(routerMap)后面加上interceptors。

参考格式：

Vue.http.interceptors.push((request, next) => {

//这里是接口请求前做的操作

    Vue.http.headers.common[‘USER-TOKEN‘] = ‘fofofo‘

    next((response) => {

//这里是接口请求后返回数据做的操作

        console.log(‘response====‘, response.body)

        if (response.body.code === -2) {

            router.go({

                name: ‘index‘

            })

        }

    })

})

十、路径问题

路径问题，例如我在根目录static添加了一个images放图片文件。如果是在dom里面写可以是<img src="http://www.mamicode.com/static/images/brand-baby-leftBg.png" />，如果是在js里写，需要写成./static/images/alpes-zone-zw2.jpg这种方式。这里注意如果有本地视频，在dom里也要写成是./static/video/baby_video2.mp4这种方式

十一、vuex使用

例如我有个toast想作为整个项目来使用，那就不需要在每个页面vue中分别引入toast组件。

1)根目录下的App.vue文件

参考格式

<template>

  <div>

     <toast :show="toastShown" type="text" width="20em" @on-hide="toastOnChange">{{toastText}}</toast>

  </div>

</template>

<script>

    import Toast from ‘vux/dist/components/toast/index.js‘;

    import store from ‘./vuex/store‘

    let commit = store.commit || store.dispatch

    export default {

        methods: {

            toastOnChange() {

                commit(‘UPDATE_TOAST‘, ‘‘, false)

            }

        },

        components: {

            Toast

        },

        store,

        vuex: {

            getters: {

                toastShown: state => state.toastShown,

                toastText: state => state.toastText,

                route: state => state.route,

                isLoading: state => state.isLoading,

                direction: state => state.direction

            }

        }

    }

2)根目录下的vuex/store.js

const state = {

    isLoading: false,

    toastText:‘‘

}

export default new Vuex.Store({

    state,

    mutations: {

        UPDATE_TOAST (state, text, bool) {

            state.toastText = text

            state.toastShown = bool

        }

    }

})

3)在需要显示toast的地方传入显示文本和标志符，例如commit(‘UPDATE_TOAST‘, ‘请重新登录‘, true)

十二、cordova联调

为了全局可以使用cordova，必须先在index.html上引入cordova，例如<script src="http://www.mamicode.com/cordova.js"></script>

参考格式：

cordova.plugins.NetworkUtil.isNetworkAvailable((flag) => {

   console.log(‘NetworkUtil.isNetworkAvailable success:‘ + flag);

   if (flag) {

   } else {

   }

   }, (error) => {

      console.log(‘NetworkUtil.isNetworkAvailable error:‘ + error);

});

vue笔记