Vue 移动端项目生产环境的优化

原创 2017年11月17日 00:00:00

640.gif?wxfrom=5&wx_lazy=1

本文来自作者 一米阳光 在 GitChat 上分享「Vue 移动端项目生产环境的优化」,阅读原文」查看交流实录

文末高能

编辑 | 嘉仔

讲解之前,咱们接地气的描述一下单页面应用程序。

所谓单页面应用程序,其实就是只有一个页面,这个页面中有一个div,而后的页面,我们称为模板(或者组件),在切换页面的时候,改变这个div中的模板(或者组件)即实现的单页面应用程序。

本文讲解,均是在vue脚手架搭建vue框架完备之后:(脚手架使用顺序)

   npm install -g vue-cli    vue init webpack XXXX    cd XXXX    npm install  /  npm install --registry=https://registry.npm.taobao.org    npm run dev

这个时候,最基本的vue框架就搭建完成了,基本目录解构如下:

  • build    最终发布的代码存放位置。

  • config    配置目录,包括端口号等。我们初学可以使用默认的。

  • node_modules        npm 加载的项目依赖模块

  • src      这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:

  • assets        放置一些图片,如logo等。

  • components    目录里面放了一个组件文件,可以不用。

  • App.vue     项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。

  • main.js    项目的核心文件。

  • static    静态资源目录,如图片、字体等。

  • .xxxx文件    这些是一些配置文件,包括语法配置,git配置等。

  • index.html    首页入口文件,你可以添加一些 meta 信息或同统计代码啥的。

  • package.json    项目配置文件。

  • README.md    项目的说明文档,markdown 格式

在App.vue中有一个容器,后续的模板页面会填充到这个里面,可以理解为我本文开篇所指的div。在看main.js里面最后两行render: h => h(App),渲染App,刚开始接触的小伙伴会问,这个App那来的,咱们在看这个js最顶部import App from ‘./App’   (这里啰嗦一下是因为刚刚接触vue的小伙伴不是很明白。)

接下来看看router文件,在router文件夹下有一个index.js,这里需要注意,如果router文件夹下是index.js在引用的时候,import router from ‘./router’,如果router文件夹下不是index.js(比如:router.js),引用的时候import router from ‘./router/router’,我们在components目录下建立一个init.vue,home.vue,login.vue三个组件router/index.js。

import Vue from 'vue' import VueRouter from 'vue-router' //import store from '../store' Vue.use(VueRouter)  /**   *  @path: 路径   *  @name:路径的别名   *  @meta:这个里面可以存放很多东西,比如下面这个:children   *  @children:子路由   比如:我们移动项目的header和footer,可以把这个组件写在init(名字随意),init就是父路由,在父录音中包含的所以路由都是子路由,比如下面的home,可有有很多的父子路由,更具需求随意添加。这快细说,有很多东西,不明白的小伙伴可以私下@我   */   meta: {Title: '账户流水', Header: true, Back: true, Replace: false, Footer: false, requireAuth:true} /**  * @Title:页面的标题和Header部分的标题  * @Header:是否显示Header  * @Back:是否显示返回按钮  * @Replace:返回事件的参数(默认为go(-1))  * @Footer:是否显示footer  * @requireAuth:是否需要登陆  */ consot router = new VueRouter({    routes:[{        path: '/init',              name:'init',                meta:{},                    component: resolve => require(['../components/init.vue'], resolve),        children: [{          path:'/init/home',          name:'home',          meta:{title:'主页(需要登陆)'},          component: resolve => require(['../components/home.vue'], resolve)        }]    },{    path:'/',    name:'login',    meta:{title:'登陆'},    component: resolve => require(['../components/login.vue'], resolve)  }] }) //修改网页的title router.afterEach((transition) => {}) //路由拦截器的操作以及store的操作(总之一切路由加载操作都可以在这里面完成) router.beforeEach((to, from, next) => {}) //暴露出口(vue中必须这么写,才能在外部被调用) export default router ····························································· main.js import Vue from 'vue' //import Vuex from 'vuex' //import FastClick from 'fastclick' import router from './router' //import store from './store' import App from './App' ······················· new Vue({ // store,  router,  render: h => h(App) }).$mount('#app') new Vue({  store,  router,  render: h => h(App) }).$mount('#app')

好啦,一完整的路由配置就完成啦!每次添加页面,只需要在路由文件中添加相应的配置即可比如,init/login,home是init的子路由。

接下来我们谈谈工具类的封装这块。在src下新建一个util或者kit(名字不重要)。因为之前有很多小伙伴问我在vue中使用jQuery的Ajax(我是非常非常的不推荐在vue中使用jQuery的,但是为了响应号召,这里就提供一份儿基于jQuery封装的Ajax)。要用到jQuery,我们需要在vue项目中安装jQuery npm install jQuery -s然后,在vue项目build/webpack.base.conf.js中顶部加上var webpack = require("webpack")在底部和module处添加:

plugins: [    new webpack.optimize.CommonsChunkPlugin('common.js'),    new webpack.ProvidePlugin({      jQuery: "jquery",      $: "jquery"    })  ]

0?wx_fmt=png

好啦,你可以在全局使用jQuery了。

kit/Request.js import Vue from 'vue' import store from '../store' import router from '../router' let Export = {} let vue = new Vue({router}) Export.post = function (options) {  options.method = 'POST'  return Request(options) } Export.get = function (options) {  options.method = 'GET'  return Request(options) } Export.put = function (options) {  options.method = 'PUT'  return Request(options) } Export.del = function (options) {  options.method = 'DELETE'  return Request(options) } const Request = function (options) {    let newDef = $.Deferred()    store.dispatch('showloader')    /**     * @url:请求的接口地址     * @method: 请求方式(GET/POST/PUT/DELETE)     * @param: 请求参数{key:val} (id:'11',name:'name')     * @headers: 请求的headers{key:val} (token:aabbccdd)     * @useCache: 缓存(针对GET方式)     * @skipValidation:跳过验证     */    let url = vue.SERVER_NAME + vue.API_PREFIX + options.url    let method = options.method    let param = options.data || true    let headers = options.headers || true    let useCache = options.cache || true    let skipValidation = options.skipValidation || true    if (method !== "GET") {      param = (typeof param === "string") ? param : JSON.stringify(param)    }    $.ajax({      url: url,      type: method.toUpperCase(),      dataType: "json",      contentType: "application/json; charset=utf-8",      headers: headers,      data: param,      cache: !!useCache,      success: (data) => {        if (skipValidation) {          store.dispatch('hideloader')          newDef.resolve(data)        } else if (handleApiResponseStatus(url, data)) {          store.dispatch('showloader')          newDef.resolve(data)        }      },      error:(request, textStatus) => {        store.dispatch('showloader')        handleHttpResponseStatus(url, request.status)      }    });    /**     * 处理接口响应状态     */    function handleApiResponseStatus(url, data){      console.info('handle Api Response Status Error')      if (!data || (!data.codeText)) {        console.error(url, data)        return false      }      if (data.codeText == "RESULT_LOGIN_EXPIRED") {        console.info('哎呦喂!登陆超时')        return false      } else if (data.codeText == "RESULT_NEED_ADVANCE_AUTH") {        console.info('哎呦喂!登陆超时,重新登陆')      } else if (data.codeText == "RESULT_NEED_BINDPHONE") {        return true      } else if (data.codeText == "FORBIDDEN") {        console.info('哎呦喂!权限验证失败')        return false      }      return true    }    /**     * 处理HTTP相应状态     */    function handleHttpResponseStatus(url, status) {      console.info('handle Http Response Status Error:' + status)      let statu = Number(status)      if (statu == 404) {        console.info('哎呦喂!我找不到页面')      } else if (statu >= 500) {        console.info('哎呦喂!服务器异常')      } else {        console.info('哎呦喂!网络出现异常')      }    }    return newDef.promise() }

在组件调用:

import Request from '../kit/Request' Request.get({      url: '',      data:{},      headers:{token:''},    }).then((response) =>{      console.log(response)    });  },

到此处本文就结束了。不明吧的地方欢迎@我,或者关注我的github或者CSDN微博。

小伙伴们,你们看懂了吗?

下一文章,我将和大家说说路由拦截器和store(vuex的详解)。我们只有在做项目的时遇到问题,不断的去研究,才得以自我成长。

近期热文

TensorFlow 人脸识别网络与对抗网络搭建

带你从零开始,快速学会 Matlab GUI

Docker 落地踩过的坑

如何快速入门网络基础知识(TCP/IP 和 HTTP

Node 企业项目大规模实践


福利

640?wx_fmt=png

「阅读原文」看交流实录,你想知道的都在这里


版权声明:本文为GitChat作者的原创文章,未经 GitChat 允许不得转载。

swift学习---长句部分二(第一次计划看一本完整的英文资料,你是最棒的,加油)

You can  also  use an  implicity unwrapped optinal  with optional binding,to check and unwrap its v...

CentOS 配置多网卡及简单路由设置

CentOS 配置多网卡及简单路由设置

vue项目部署到生产环境(Tomcat为例)

Vue项目webpack打包部署到服务器 这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以T...

详解vue项目和普通项目如何解决开发环境与生产环境下的跨域问题

概念: 什么是跨域? 跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。所谓同源是指,域名,协议,端口均相同。 http://ww...

Vue 生产环境部署

Vue2.0 生产环境部署 简要:继上次搭建vue环境后,开始着手vue的学习;为此向大家分享从开发环境部署到生产环境(线上)中遇到的问题和解决办法,希望能够跟各位VUE大神学习探索,如果有不对或...

VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址

前言 我们在开发项目的时候,往往会在同一个局域网进行开发,前后端分离同时进行开发。我们前端调用后端给的接口也是在局域网内部的。但是,当项目推到线上的时候,我们会从真实服务器上获取接口,因此,我们...

项目生产环境下 log4j 和spring MVC视图解析viewResolvers的配置

首先log4j和视图解析viewResolvers在spring管理的项目中常用到,而且每次没有配置好log4j,IDE集成工具的控制台都不好看到输出日志。另外视图解析viewResolvers的运用...
  • EDIAGD
  • EDIAGD
  • 2013年01月30日 23:47
  • 912

SVN – 搭建 SVN 服务器 && 多项目分别建立版本库 && 同步至生产环境

1、安装Subversion Shell [root@VM_centos /]# yum install subversion 1 [roo...

采用Apache+mod_wsgi在windows下搭建Flask项目(本地部署Flask的生产环境)

前言在windows上部署Flask环境遇到许多大坑,一一记录下来。 一级大坑:Apache,mod_wsgi和Python都必须用相同版本的C/C++编译器生成,它们要么是32位的,要么是64位的...

Gradle项目之Spring.profile.开发.测试.生产环境的配置和切换之一键部署

背景: 软件开发过程一般涉及“开发 -> 测试 -> 部署上线”多个阶段,每个阶段的环境的配置参数会有不同,如数据源,文件路径等。为避免每次切换环境时都要进行参数配置等繁琐的操作,可以通过spring...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Vue 移动端项目生产环境的优化
举报原因:
原因补充:

(最多只允许输入30个字)