原创

webpack+vue开发环境搭建

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://xiangzhihong.blog.csdn.net/article/details/80334802

工具安装

首先安装一些必要的工具,由于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简介

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是初始化一个项目,例如:

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来实现转场动画效果。例如:

<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

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方式来进行网络请求。以下是请求的示例:

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

如果报错,请按照错误提示修改错误即可。

文章最后发布于: 2018-05-16 11:40:41
展开阅读全文
0 个人打赏

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览