p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.0px Helvetica; color: #454545 }
p.p3 { margin: 0.0px 0.0px 2.0px 0.0px; text-align: justify; font: 14.0px "PingFang SC Semibold"; color: #454545 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.0px "PingFang SC"; color: #454545 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.0px Helvetica; color: #454545; min-height: 14.0px }
p.p6 { margin: 0.0px 0.0px 2.0px 0.0px; text-align: justify; font: 14.0px "PingFang SC"; color: #454545 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; color: #454545 }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; color: #454545; min-height: 14.0px }
p.p9 { margin: 0.0px 0.0px 2.0px 0.0px; text-align: justify; font: 14.0px Helvetica; color: #454545 }
li.li1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "PingFang SC Semibold"; color: #454545 }
span.s1 { font: 12.0px "PingFang SC" }
span.s2 { font: 12.0px Helvetica }
span.s3 { font: 12.0px Helvetica; text-decoration: underline; color: #e4af09 }
span.s4 { font: 14.0px "PingFang SC" }
span.s5 { font: 14.0px Helvetica }
span.Apple-tab-span { white-space: pre }
ol.ol1 { list-style-type: decimal }
一、部署
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; color: #454545 }
span.s1 { font: 12.0px "PingFang SC" }
需要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 = 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 = 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="../../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="cordova.js"></script>
参考格式：
cordova.plugins.NetworkUtil.isNetworkAvailable((flag) => {
console.log(‘NetworkUtil.isNetworkAvailable success:‘ + flag);
if (flag) {
} else {
}
}, (error) => {
console.log(‘NetworkUtil.isNetworkAvailable error:‘ + error);
});