首先安装一些必要的工具,由于npm的源都是在国外的地址,所以安装会比较慢,可以使用淘宝的国内镜像地址。
1,安装淘宝镜像的命令为:
npm install -g cnpm --registry=https://registry.npm.taobao.org
2、然后安装全局vue-cli脚手架,用于帮助搭建所需的Vue的开发模板框架。命令如下:
cnpm install -g vue-cli
安装完后输入命令“vue -V”,如果出现vue的客户端版本信息,则说明安装成功。
3,安装 webpack,安装的命令为:
cnpm install webpack -g
安装完成之后,可以使用命令“ webpack -h”进行验证。至此,环境准备工作完成,后续即将开始环境验证工作。如果提示如下信息:
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
可以使用下面的命令:
npm install --save-dev webpack-cli -g
webpack是一个module bundler(模块打包工具),所谓的模块就是在平时的前端开发中,用到一些静态资源,如JavaScript、CSS、图片等文件,webpack就将这些静态资源文件称之为模块。 webpack支持AMD和CommonJS,以及其他的一些模块系统,并且兼容多种JS书写规范,可以处理模块间的依赖关系,所以具有更强大的JS模块化的功能,它能对静态资源进行统一的管理以及打包发布。 它在很多地方都能替代Grunt和Gulp,因为它能够编译打包CSS,做CSS预处理,对JS的方言进行编译,打包图片,代码压缩等等。
Grunt和Gulp的工作方式:在一个配置文件中,指明对某些文件进行编译,组合,压缩等任务的具体步骤,运行之后自动逐步完成设定的任务。
相比Grunt和Gulp,webpack具有如下的一些优势:
下面介绍使用webpack+vue新建一个移动项目,最终效果如图:
使用命令vue init是初始化一个项目,例如:
vue init webpack hello
基于webpack来构建一个名称为hello的vue项目。
vue-cli是一个交互式命令行,通过vue命令构建项目会需要我们填写一些项目的信息,常见的信息有:
package.json主要是项目依赖的一些第三方的库:
dependencies:项目中实际需要使用到的依赖包;
devDependencies:项目开发过程中需要使用的一些工具包,不是项目实际线上代码的一部分。
在项目开发过程中,我们的大部分任务是在src这个目录下完成的
main.js: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中通过vue-router来管理页面以及实现页面的跳转逻辑,移动应用页面跳转时都有转场效果,在vue中也可以使用transition来实现转场动画效果。例如:
<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进行多余的设置。使用插件之前,需要先使用如下的命令安装插件:
npm i -S vue-navigation
然后再使用:
import Navigation from 'vue-navigation'
Vue.use(Navigation, {router})
使用前需要在App.vue中进行设置:
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
直接引用Tabbar组件即可,如果需要添加跳转动画可以在
<template>
<div class="content">
<router-view>router-view>
<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>
这里我们还是使用fetch进行网络请求,当然大家也可以使用最新的async/await方式来进行网络请求。以下是请求的示例:
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
请先安装项目的依赖库:
npm install
注:如果提示“error Unexpected end of JSON input while parsing near ‘…andard-version”:”^3.0’”错误,可以使用下面的命令清除缓存然后在实现“npm install”命令。
npm cache clean --force
然后使用下面的命令:
webpack-dev-server
或者使用
npm run dev
如果报错,请按照错误提示修改错误即可。