工具安装
首先安装一些必要的工具，由于npm的源都是在国外的地址，所以安装会比较慢，可以使用淘宝的国内镜像地址。 1，安装淘宝镜像的命令为：
代码语言：javascript复制npm install -g cnpm --registry=https://registry.npm.taobao.org 2、然后安装全局vue-cli脚手架，用于帮助搭建所需的Vue的开发模板框架。命令如下：
代码语言：javascript复制cnpm install -g vue-cli安装完后输入命令“vue -V”，如果出现vue的客户端版本信息，则说明安装成功。 3，安装 webpack，安装的命令为：
代码语言：javascript复制cnpm install webpack -g安装完成之后，可以使用命令“ webpack -h”进行验证。至此，环境准备工作完成，后续即将开始环境验证工作。如果提示如下信息：
代码语言：javascript复制The CLI moved into a separate package: webpack-cli
Would you like to install webpack-cli? (That will run npm install -D webpack-cli) (yes/NO)NO
It needs to be installed alongside webpack to use the CLI可以使用下面的命令：
代码语言：javascript复制npm install --save-dev webpack-cli -g打包工具webpack简介
webpack是一个module bundler（模块打包工具），所谓的模块就是在平时的前端开发中，用到一些静态资源，如JavaScript、CSS、图片等文件，webpack就将这些静态资源文件称之为模块。 webpack支持AMD和CommonJS，以及其他的一些模块系统，并且兼容多种JS书写规范，可以处理模块间的依赖关系，所以具有更强大的JS模块化的功能，它能对静态资源进行统一的管理以及打包发布。 它在很多地方都能替代Grunt和Gulp，因为它能够编译打包CSS，做CSS预处理，对JS的方言进行编译，打包图片，代码压缩等等。
Grunt和Gulp的工作方式：在一个配置文件中，指明对某些文件进行编译，组合，压缩等任务的具体步骤，运行之后自动逐步完成设定的任务。
webpack的打包模型如下：
相比Grunt和Gulp，webpack具有如下的一些优势：
- 对 CommonJS 、AMD 、ES6的语法做了兼容；
- 对js、css、图片等资源文件都支持打包；
- 串联式模块加载器以及插件机制,让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持；
- 有独立的配置文件webpack.config.js；
- 可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间；
- 支持 SourceUrls 和 SourceMaps，易于调试；
- 具有强大的Plugin接口，大多是内部插件，使用起来比较灵活；
- webpack 使用异步 IO 并具有多级缓存，使得 webpack 很快且在增量编译上更加快。
下面介绍使用webpack vue新建一个移动项目，最终效果如图：
vue基本知识
1，vue init
使用命令vue init是初始化一个项目，例如：
代码语言：javascript复制vue init webpack hello基于webpack来构建一个名称为hello的vue项目。
2，vue-cli
vue-cli是一个交互式命令行，通过vue命令构建项目会需要我们填写一些项目的信息，常见的信息有：
- Project Name：要创建的项目名称；
- Project Description：项目简介，也会出现在package.json文件中,可选；
- Author：作者，可选；
- Install vue-router：是否安装vue路由组件，做项目的话一定要安装；
- Use ESLint to lint your code：是否需要使用ESLint模块进行代码检测；
- Setup unit tests with Karma Mocha?：是否安装测试（单元测试）；
- Setup e2e tests with Nightwatch?：是否安装端到端的测试。
3，package.json
package.json主要是项目依赖的一些第三方的库：
dependencies：项目中实际需要使用到的依赖包； devDependencies：项目开发过程中需要使用的一些工具包，不是项目实际线上代码的一部分。
项目结构
- build目录：构建项目命令所需要使用到的一些脚本文件和配置文件；
- config目录：在vue-cli中会自动安装一个小型的express搭建的热重载web服务器，config里面就是关于这个服务器的相关配置；
- dist目录：项目编译构建上线后的存放目录；
- node_modules目录：项目依赖包存放目录；
- src目录：项目源代码存放目录；
- static目录：静态资源存放目录。
在项目开发过程中，我们的大部分任务是在src这个目录下完成的
main.js：vue脚手架为我们自动生成的项目中设置的入口文件，在该入口文件中，做了一些项目初始化的工作：
- 引入 Vue；
- 引入必要的组件；
- 创建Vue实例。
路由
当我们的应用变得复杂了以后，涉及到的页面也会变多，逻辑也会变复杂，原来我们是通过多页面的方式来组织和维护我们的网站，但是这样的用户体验不是太好（因为会刷新或跳转页面），为了解决用户体验问题，最好的方式，数据（页面会发生变化），但是不需要跳转、刷新。
通过ajax异步无刷新获取数据 获取到数据以后通过vue来处理和管理还有渲染页面 什么情况下获取数据渲染页面？传统的处理方式：通过url重新发送请求得到新的数据和页面，获取什么页面数据由url来决定，使用了单页面开发模式的话，就不能再使用页面跳转，但是可以使用url中的hash值的变化来决定获取什么内容渲染什么页面。
所以一个url的hash对应一个视图，那么我们就需要设置hash和视图的关系，我们可以把hash和view做一个对应关系（映射） - 设置hash-view的map（映射）关系 - 监听hash变化 - 当hash值变化的时候，根据map找到对应的组件来渲染视图
vue为我们提供了一个第三方的框架来实现上述的功能：vue-router
移动项目实战
基础设置
使用vue-cli搭建移动app时，需要进行如下的一些设置：
- 使用vue-cli搭建项目框架；
- 在index.html文件中添加
<meta content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0" name="viewport">，在移动端设置禁止缩放，以便显示合适大小的页面； - 如果要将页面封装为app，那么需要将config/index.js中build的assetsPublicPath设置为’./’，build获得的页面可以直接打开，而不需要使用服务器。
通用功能实现
1，vue-router页面跳转管理
一般应用都会拥有多个页面，在vue中通过vue-router来管理页面以及实现页面的跳转逻辑，移动应用页面跳转时都有转场效果，在vue中也可以使用transition来实现转场动画效果。例如：
代码语言：javascript复制<template>
<transition :name="transitionName">
<router-view></router-view>
</transition>
</template>
<script>
export default {
name: 'app',
data () {
return {
transitionName: 'fade'
}
},
watch: {
'$route' (to, from) {
let toDepth = to.meta
let fromDepth = from.meta
if (fromDepth > toDepth) {
this.transitionName = 'fade-left'
} else if (fromDepth < toDepth) {
this.transitionName = 'fade-right'
} else {
this.transitionName = 'fade'
}
}
}
}
</script>
<style>
</style>然后根据to、from meta值的大小设置不同的跳转动画。当然，更好的方式是使用插件来实现（如vue-navigation），无须对router进行多余的设置。使用插件之前，需要先使用如下的命令安装插件：
代码语言：javascript复制npm i -S vue-navigation然后再使用：
代码语言：javascript复制import Navigation from 'vue-navigation'
Vue.use(Navigation, {router}) 使用前需要在App.vue中进行设置：
代码语言：javascript复制this.$navigation.on('forward', (to, from) => {
this.transitionName = 'fade-right'
})
this.$navigation.on('back', (to, from) => {
this.transitionName = 'fade-left'
})
this.$navigation.on('replace', (to, from) => {
this.transitionName = 'fade'
})这些和其他的路由框架使用都差不多的（如keep-alive）。但是keep-alive保存状态无法识别路由的前进后退，而实际应用中，我们的需求是返回页面时，希望页面状态保存，当进入页面时希望获取新的数据，使用vue-navigation可以很好的实现这个效果。 vue-navigation插件的官方地址为：https://github.com/zack24q/vue-navigation
2，底部导航
直接引用Tabbar组件即可，如果需要添加跳转动画可以在<router-view></router-view>
<template>
<div class="content">
<!--<transition name="fade" mode="out-in">-->
<router-view></router-view>
<!--</transition>-->
<Tabbar
:routers="[
{path: '/index/home', icon: 'icon-home', name: '首页'},
{path: '/index/loading', icon: 'icon-course', name: '加载'},
{path: '/index/message', icon: 'icon-info', name: '信息'}
]"
>
</Tabbar>
</div>
</template>
<script>
export default {
name: 'Index',
components: {Tabbar: require('components/Tabbar')},
data () {
return {
}
}
}
</script>
<style lang="scss" scoped>
.content{
background-color: #eee;
}
</style>3，接口请求
这里我们还是使用fetch进行网络请求，当然大家也可以使用最新的async/await方式来进行网络请求。以下是请求的示例：
代码语言：javascript复制import fetch from 'isomorphic-fetch'
import store from 'store'
import router from './router'
var env = process.env.NODE_ENV
var rootUrl
if (env === 'development') {
rootUrl = ''
}
if (env === 'production') {
rootUrl = ''
}
const post = function (url, params = {}) {
return fetch(rootUrl url, {
method: 'post',
headers: {
'Content-type': 'application/json; charset=utf-8',
'Authorization': store.get('token')
},
body: JSON.stringify(params)
}).then(function (res) {
if (res.status === 401) {
// 没有权限
api.logout()
} else {
return res.json()
}
})
}
const urls = [
'classAtCurDate' // 普通接口列表
]
var api = {}
for (var url of urls) {
(function (url) {
api[url] = (params) => {
console.log(url)
return post('course/' url, params)
}
})(url)
}
// 需要特殊处理的接口
api.logout = () => {
store.clearAll()
router.push('login')
}
api.login = (params) => {
store.set('id', 1)
store.set('token', 2)
return Promise.resolve({params})
}
export default api项目源码地址： https://download.csdn.net/download/xiangzhihong8/10417675
请先安装项目的依赖库：
代码语言：javascript复制npm install注：如果提示“error Unexpected end of JSON input while parsing near ‘…andard-version”:”^3.0’”错误，可以使用下面的命令清除缓存然后在实现“npm install”命令。
代码语言：javascript复制npm cache clean --force然后使用下面的命令：
代码语言：javascript复制webpack-dev-server或者使用
代码语言：javascript复制 npm run dev如果报错，请按照错误提示修改错误即可。
