webpack+vue开发环境搭建

原创

wx5aae83353cec4 2022-09-07 13:40:59 ©著作权

©著作权归作者所有：来自51CTO博客作者wx5aae83353cec4的原创作品，请联系作者获取转载授权，否则将追究法律责任

工具安装

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

可以使用下面的命令：

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+vue开发环境搭建_ico

webpack的打包模型如下：

webpack+vue开发环境搭建_json_02

相比Grunt和Gulp，webpack具有如下的一些优势：

对 CommonJS 、AMD 、ES6的语法做了兼容；
对js、css、图片等资源文件都支持打包；
串联式模块加载器以及插件机制,让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持；
有独立的配置文件webpack.config.js；
可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间；
支持 SourceUrls 和 SourceMaps，易于调试；
具有强大的Plugin接口，大多是内部插件，使用起来比较灵活；
webpack 使用异步 IO 并具有多级缓存，使得 webpack 很快且在增量编译上更加快。

下面介绍使用webpack+vue新建一个移动项目，最终效果如图：

webpack+vue开发环境搭建_json_03

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>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'

使用前需要在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>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