# van-cli3-vant

**Repository Path**: Hiigaran/van-cli3-vant

## Basic Information

- **Project Name**: van-cli3-vant
- **Description**: 从0开始搭建vue-cli3 实现的移动端框架 其中包含项目常用的配置等
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-09-15
- **Last Updated**: 2024-09-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 简介
第一次自己从0开始搭建，收获很多所以记录一下。这是基于 vue-cli3 实现的移动端框架，其中包含项目常用的配置等。
[文章详情](https://www.jianshu.com/p/ebbe7d2e11e4) 

主要包括如下技术点：

- vue-cli3脚手架
- vant按需引入
- 移动端rem适配
- axios拦截封装
- 工具类函数封装
- vue-router配置
- 登录权限校验
- 多环境变量配置
- vue.config.js配置
- gzip打包优化

## 新建VUE项目
1、新建项目

    vue create <Project Name> //文件名 不支持驼峰（含大写字母）

2、手动选择需要添加的配置项：[配置详情介绍](https://www.cnblogs.com/coober/p/10875647.html)
![image](http://a1.qpic.cn/psc?/V13JHfoZ1FNLxG/S8ACDDjQaRqj9S24Z8034RAd8khVGHGDkIE7xC2yrXNyhLR0pNqSuog1rcxiqFPfRRa0WtQG9YDKptaK8fcTQQ!!/b&ek=1&kp=1&pt=0&bo=KgKqAAAAAAARF6I!&tl=3&vuin=332806446&tm=1589338800&sce=60-2-2&rf=viewer_4)

## 配置 vant
[vant](https://youzan.github.io/vant/#/zh-CN/) 是一套轻量、可靠的移动端 Vue 组件库，非常适合基于 vue 技术栈的移动端开发。

1、安装vant

    # 通过 npm 安装
    npm i vant -S
    # 通过 yarn 安装
    yarn add vant
 
2、按需引入   
对于第三方UI组件，如果是全部引入的话，比如会造成打包体积过大，加载首页白屏时间过长的问题，所以按需加载非常必要。

1、安装依赖

    npm i babel-plugin-import -D
2、配置 .babelrc 或者 babel.config.js 文件

    // 在.babelrc 中添加配置
    {
      "plugins": [
        ["import", {
          "libraryName": "vant",
          "libraryDirectory": "es",
          "style": true
        }]
      ]
    }
    
    // 对于使用 babel7 的用户，可以在 babel.config.js 中配置
    module.exports = {
      plugins: [
        ['import', {
          libraryName: 'vant',
          libraryDirectory: 'es',
          style: true
        }, 'vant']
      ]
    };
3、按需引入

你可以在代码中直接引入 Vant 组件，插件会自动将代码转化为方式二中的按需引入形式

    import Vue from 'vue'
    import { Button } from 'vant'
    
    Vue.use(Button)

## rem 适配

移动端适配是开发过程中不得不面对的事情。在此，我们使用 postcss 中的 px2rem-loader，将我们项目中的 px 按一定比例转化 rem，这样我们就可以对着蓝湖上的标注写 px 了。

我们将 html 字跟字体设置为 100px，很多人选择设置为 375px，但是我觉得这样换算出来的 rem 不够精确，而且我们在控制台上调试代码的时候无法很快地口算得出它本来的 px 值。如果设置 1rem=100px，这样我们看到的 0.16rem，0.3rem 就很快得算出原来是 16px，30px 了。

具体步骤如下：

1、安装依赖
    
    npm install px2rem-loader --save-dev
2、在 vue.config.js 进行如下配置

      css: {
        // css预设器配置项
        loaderOptions: {
          postcss: {
            plugins: [
              require('postcss-px2rem')({
                remUnit: 100
              })
            ]
          }
        }
      },
3、在 main.js 设置 html 跟字体大小

    function initRem() {
      let cale = window.screen.availWidth > 750 ? 2 : window.screen.availWidth / 375
      window.document.documentElement.style.fontSize = `${100 * cale}px`
    }
    
    window.addEventListener('resize', function() {
      initRem()
    })

## axios 请求封装
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库；封装axios，一方面为了以后维护方便，另一方面也可以对请求进行自定义处理

1、安装依赖

    npm install axios
    
2、设置请求拦截和响应拦截


    //全局默认配置
    const service = axios.create({
      baseURL: process.env.NODE_ENV == 'production' ? conf.proBaseURL : conf.devBaseURL,
      timeout: 15000, // 请求超时时间
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'content-type': 'application/json',
        'source': 'easy',
      }
    })
    
    /* 请求拦截器 */
    service.interceptors.request.use(
      config => {
        console.log("config", config)
        if (config.isLoad) {
          Vue.prototype.$Toast.loading({
            duration: 0,       // 持续展示 toast
            forbidClick: true, // 禁用背景点击
            mask: false,        //是否显示遮罩层
            message: '加载中...'
          });
        }
        return config;
      },
      error => {
        return Promise.error(error);
      })
    
    /* 响应拦截器 */
    service.interceptors.response.use(
      response => {
        Vue.prototype.$Toast.clear() //隐藏loading
        return response
      },
      error => {
        Vue.prototype.$Toast.clear();  //隐藏loading
        if (error && error.response) {
          switch (error.response.status) {
            case 401: // 401: 未登录
              Vue.prototype.$Toast(error.response.data.msg)
              console.log('未登录')
              break;
            case 403: //拒绝访问
              console.log('拒绝访问')
              break;
            case 404: // 404请求不存在
              console.log('404请求不存在')
              break;
            case 500:
              console.log('服务器端出错')
              break;
            // 其他错误，直接抛出错误提示
            default:
              console.log(error.response.data.message)
          }
        } else {
          console.log('连接到服务器失败')
        }
        return Promise.reject(error.response);
      }
    )
    
3、封装 get 和 post 请求方法
    
    /*
       get请求方法
       url 请求地址
       param 请求时携带的参数
       isLoad 是否需要loading
     */
    export function getAction(url, params, isLoad) {
      return service({
        url: url,
        method: 'get',
        params: params,
        loading: isLoad
      }).catch((e) => {});
    }
    
    /*
       post请求方法
       url 请求地址
       param 请求时携带的参数
       isLoad 是否需要loading
     */
    export function postAction(url, params, isLoad) {
      return service({
        url: url,
        method: 'post',
        data: params,
        loading: isLoad
      }).catch((e) => {});
    }

## 工具类函数封装
1、添加方法到 vue 实例的原型链上

    export default {
      method1(val) {
        ...
      },
      method2 (val) {
       ...
      },
    }
2、在 main.js 通过 vue.use()注册

    import check from "@/assets/js/check"
    
    Vue.prototype.$check = check

## vue-router 配置
平时很多人对 vue-router 的配置可配置了 path 和 component，实现了路由跳转即可。其实 vue-router 可做的事情还有很多，比如

- 路由懒加载配置
- 页面缓存配置

##### 路由懒加载配置
Vue 项目中实现路由按需加载（路由懒加载）的三种方式：

    // 1、Vue异步组件技术：
    {
      path: '/home',
      name: 'Home',
      component: resolve => reqire(['../views/Home.vue'], resolve)
    }
    // 2、es6提案的import()
    {
      path: '/',
      name: 'home',
      component: () => import('../views/Home.vue')
    }
    // 3、webpack提供的require.ensure()
    {
      path: '/home',
      name: 'Home',
      component: r => require.ensure([],() =>  r(require('../views/Home.vue')), 'home')
    }

##### 登录权限校验
在应用中，通常会有以下的场景。有些页面是不需要登录即可访问的，用户在任何情况都能看到的；但是也有是需要登录后才能访问的。此时就需要对页面访问进行控制了。

此时。路由守卫可以帮助我们做登录校验。具体如下：

配置路由的 meta 对象的 auth 属性

    const routes = [
      {
        path: '/',
        name: 'home',
        component: () => import('@/views/Home.vue'),
        meta: {
          title: '首页',
          auth: true, //是否需要登录 
        }
      },
    ]
    
    const router = new VueRouter({
      base: process.env.BASE_URL,
      routes,
      // 加载的页面滑动最顶部
      scrollBehavior: () => ({ y: 0 })
    })

##### 页面缓存配置
项目中，总有一些页面我们是希望加载一次就缓存下来的，此时就用到 keep-alive 了。keep-alive 是 Vue 提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在页面渲染完毕后不会被渲染成一个 DOM 元素。
1、通过配置路由的 meta 对象的 keepAlive 属性值来区分页面是否需要缓存

    const routes = [
      {
        path: '/list',
        name: 'list',
        component: () => import('@/views/list.vue'),
        meta: { 
            title: '列表页',
            keepAlive: true, 
            auth: false 
        }
      },
    ]
2、在 app.vue 做缓存判断

    <div id="app">
      <router-view v-if="!$route.meta.keepAlive"></router-view>
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
    </div>

## 多环境变量配置
首先我们先来了解一下环境变量，一般情况下我们的项目会有三个环境，本地环境(development)，测试环境(test)，生产环境(production)，

1、在项目中新建env.config.js统一管理

    // 根据环境引入不同配置
    const devBaseURL = '/'; // 本地环境
    const testBaseURL = '/test/xx/'; //测试环境
    const proBaseURL = '/xx/xx/'; // 生产线上
    const version = `1.0.0_${new Date().getTime()}`; //版本号
    
    module.exports = {
      devBaseURL,
      testBaseURL,
      proBaseURL,
      version
    }
2、配置打包命令
package.json 里的 scripts 不同环境的打包命令

    //通过 npm run serve 启动本地
    //通过 npm run test 打包测试
    //通过 npm run build 打包正式

    "scripts": {
      "dev": "vue-cli-service serve",
      "build": "vue-cli-service build",
      "test": "vue-cli-service build --mode test",
    }
## vue.config.js 配置
vue-cli3 开始，新建的脚手架都需要我们在 vue.config.js 配置我们项目的东西。主要包括

- 打包后文件输出位置
- 关闭生产环境 souecemap
- 全局stylus样式传入全局变量
- 配置 rem 转化 px
- 配置 alias 别名
- 去除生产环境 console
- 跨域代理设置


    const path = require('path')
    const conf = require("./src/config/env.config");  //路径配置
    
    function resolve (dir) {
      return path.join(__dirname, dir)
    }
    module.exports = {
      publicPath: process.env.NODE_ENV === 'production' ? conf.proBaseURL : conf.devBaseURL,
      // 将构建好的文件输出到哪里
      outputDir: 'dist',
      // 放置生成的静态资源(js、css、img、fonts)的目录。
      assetsDir: 'static',
      // 指定生成的 index.html 的输出路径
      indexPath: 'index.html',
      //如果不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
      productionSourceMap: false,
      // 配置css
      css: {
        //打包编译后的 模块名称.版本号.时间戳】 [hash]
        extract: {
          filename: `static/css/[name].${conf.version}.css`,
          chunkFilename: `static/css/[name].${conf.version}.css`,
        },
        sourceMap: true,
        // css预设器配置项
        loaderOptions: {
          // 向全局stylus样式传入共享的全局变量
          stylus: {
            import: '~@/assets/styles/global.styl',
          },
          //vant自适应转rem
          postcss: {
            plugins: [
              require('postcss-px2rem')({
                remUnit: 100
              })
            ]
          }
        },
        // 启用 CSS modules for all css / pre-processor files.
        modules: false
      },
      chainWebpack: config => {
        // 添加别名
        config.resolve.alias
          .set('@', resolve('src'))
          .set('@assets', resolve('src/assets'))
          .set('@components', resolve('src/components'))
          .set('@views', resolve('src/views'))
          .set('@utils', resolve('src/utils'))
    
        config.optimization.minimizer('terser').tap((args) => {
          // 去除生产环境console
          args[0].terserOptions.compress.drop_console = true
          return args
        })
      },
      devServer: {
        open: false, //是否自动弹出浏览器页面
        host: '192.168.0.111', //指定要使用的主机。默认情况下这是localhost。
        port: 8088, //端口号，
        https: false, // https:{type:Boolean}
        disableHostCheck: true, //内网穿透使用的--自用
        proxy: {  //跨域代理
          "/api": {
            target: "http://192.168.0.136:8502/api/",  //目标代理服务器地址
            changeOrigin: true,  //允许跨域
            "secure": false,  //设置证书免校验
            ws: true,  // 代理的WebSockets
            pathRewrite: {
              "^/api": ""
            }
          }
        }
      },
    }
    
## gZip 加速优化
webpack有一个文件压缩的插件，可以将大文件压缩成gzip的格式。启用 gzip 压缩可大幅缩减传输资源大小，从而缩短资源下载时间，减少首次白屏时间，提升用户体验。

gzip 对基于文本格式文件的压缩效果最好（如：CSS、JavaScript 和 HTML），在压缩较大文件时往往可实现高达 70-90% 的压缩率，对已经压缩过的资源（如：图片）进行 gzip 压缩处理，效果很不好。

1、安装依赖

    npm install compression-webpack-plugin  --save-dev

2、添加配置

    if (process.env.NODE_ENV === 'production') {
        return {
            plugins: [
              new CompressionPlugin({ // gzip压缩配置
                test: /\.js$|\.html$|.\css/, // 匹配文件名
                threshold: 10240, // 对超过10k的数据压缩
                deleteOriginalAssets: false // 不删除源文件
              })
            ]
        }
    }