vuecli3 vant rem 移动端框架方案

栏目: jQuery · 发布时间: 5年前

内容简介:基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装,构建手机端模板脚手架帮你做好的配置有之前写过一个多环境的方案,是基于vue-cli2.0的

描述

基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios封装,构建手机端模板脚手架

帮你做好的配置有

  1. vuecli3.0
  2. 多环境开发
  3. axios封装
  4. rem适配方案
  5. 生产环境cdn优化首屏加速
  6. babel低版本浏览器兼容
  7. 环境发布脚本
    ...
    可以上手直接写代码

多环境开发

之前写过一个多环境的方案,是基于vue-cli2.0的 vue多环境配置方案-传送门

最近新的项目采用了vuecli3.0开始了一番折腾

这里参考了 vue-admin-template 基本思路不变

在src的文件里新建config 根据不同的环境去引用不同的配置文件,不同的是在根目录下有三个设置环境变量的文件

这里可以参考vue-admin-template

这里要注意的是,要以 VUE_APP_ 前缀设置,才可以在vue中引用

vuecli3 vant rem 移动端框架方案

这里有个问题,既然这里有了根据不同环境设置变量的文件,为什么还要去config下新建三个对应的文件呢?

个人比较喜欢这种引入的方式而,比如我需要在文件引入api.common_api

import { api } from '@/config'
// api
const { common_api } = api
复制代码
vuecli3 vant rem 移动端框架方案

373516084-5ce664bcb0207_articlex.png

rem适配方案

还是那句话,用vw还是用rem,这是个问题?

选用rem的原因是因为vant直接给到了这个适配方案,个人也比较喜欢这个方案

vuecli3 vant rem 移动端框架方案

================2019.06.06 更新===========================

生产环境使用CDN

可以使用cdn提高速度,这里要在vue.config.js需要配置externals,修改public 下的index.html

vue.config.js

'use strict'
const path = require('path')
const defaultSettings = require('./src/config/index.js')
function resolve(dir) {
  return path.join(__dirname, dir)
}

const name = defaultSettings.title || 'vue mobile template' // page title
const port = 9018 // dev port
const externals = {
  vue: 'Vue',
  'vue-router': 'VueRouter',
  vuex: 'Vuex',
  vant: 'vant',
  axios: 'axios',
  'crypto-js': 'CryptoJS'
}
// cdn
const cdn = {
  // 开发环境
  dev: {
    css: [],
    js: [
      'https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.js'
    ]
  },
  // 生产环境
  build: {
    css: ['https://cdn.jsdelivr.net/npm/vant@beta/lib/index.css'],
    js: [
      'https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.js',
      'https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js',
      'https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.6/vue-router.min.js',
      'https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js',
      'https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.1/vuex.min.js',
      'https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js',
      'https://cdn.jsdelivr.net/npm/vant@beta/lib/vant.min.js'
    ]
  }
}
module.exports = {
  publicPath: process.env.NODE_ENV === 'development' ? '/' : '/app/', // 需要区分生产环境和开发环境,不然build会报错
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    }
  },

  configureWebpack: config => {
    // 为生产环境修改配置...
    if (process.env.NODE_ENV === 'production') {
      // externals里的模块不打包
      Object.assign(config, {
        name: name,
        externals: externals
      })
    }
    // 为开发环境修改配置...
    if (process.env.NODE_ENV === 'development') {
    }
  },
  chainWebpack(config) {
    config.plugins.delete('preload') // TODO: need test
    config.plugins.delete('prefetch') // TODO: need test
    // alias
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('views', resolve('src/views'))
      .set('components', resolve('src/components'))
    /**
     * 添加CDN参数到htmlWebpackPlugin配置中, 详见public/index.html 修改
     */
    config.plugin('html').tap(args => {
      if (process.env.NODE_ENV === 'production') {
        args[0].cdn = cdn.build
      }
      if (process.env.NODE_ENV === 'development') {
        args[0].cdn = cdn.dev
      }
      return args
    })

    // set preserveWhitespace
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.preserveWhitespace = true
        return options
      })
      .end()

    config
      // https://webpack.js.org/configuration/devtool/#development
      .when(process.env.NODE_ENV === 'development', config =>
        config.devtool('cheap-source-map')
      )

    config.when(process.env.NODE_ENV !== 'development', config => {
      config
        .plugin('ScriptExtHtmlWebpackPlugin')
        .after('html')
        .use('script-ext-html-webpack-plugin', [
          {
            // `runtime` must same as runtimeChunk name. default is `runtime`
            inline: /runtime\..*\.js$/
          }
        ])
        .end()
      config.optimization.splitChunks({
        chunks: 'all',
        cacheGroups: {
          libs: {
            name: 'chunk-libs',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial' // only package third parties that are initially dependent
          },
          // elementUI: {
          //   name: 'chunk-elementUI', // split elementUI into a single package
          //   priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
          //   test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
          // },
          commons: {
            name: 'chunk-commons',
            test: resolve('src/components'), // can customize your rules
            minChunks: 3, //  minimum common number
            priority: 5,
            reuseExistingChunk: true
          }
        }
      })
      config.optimization.runtimeChunk('single')
    })
  }
}

复制代码

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <% for (var i in
      htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
      <% } %>
    <title><%= webpackConfig.name %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- 使用CDN加速的JS文件,配置在vue.config.js下 -->
    <% for (var i in
      htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
    <!-- built files will be auto injected -->
  </body>
</html>

复制代码

babel转 ES5

因为babel研究的还不够透彻,所以采用了最笨的方法直接引入babel-polyfill,生产环境和开发环境都直接引用cdn js

babel.config.js 添加 useBuiltIns: 'entry'

babel.config.js

module.exports = {
  presets: [['@vue/app', { useBuiltIns: 'entry' }]],
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: true
      },
      'vant'
    ]
  ]
}

复制代码

总结

因为项目刚刚构建起来,后面还会持续更新,实际使用过程中一定还有很多问题,如果文章中有错误希望能够被指正,一起成长

项目github地址

关于我

您可以扫描添加下方的微信并备注 Soul 加交流群,给我提意见,交流学习。

vuecli3 vant rem 移动端框架方案

如果对你有帮助送我一颗小星星(づ ̄3 ̄)づ╭❤~

转载请联系作者!


以上所述就是小编给大家介绍的《vuecli3 vant rem 移动端框架方案》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

打破界限

打破界限

电通跨媒体开发项目组 / 苏友友 / 中信出版社 / 2011-10 / 35.00元

《打破界限:电通式跨媒体沟通策略》是日本电通跨媒体沟通开发项目组对“跨媒体”的思考方式、策划工具、成功案例和评估手段等诸多内容进行深入研究得到的丰硕成果,深刻剖析了此营销模式的本质。 目前,为客户提供整合式营销解决方案的电通模式在世界各国都获得了很高评价。而跨媒体沟通正是电通实现这种模式最先进的工具之一。一起来看看 《打破界限》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码