项目结构

node_modules 依赖包

public 静态资源托管

src 源码

assets  资源文件    

  images 

  font  

  js  

  css


components 存放普通的组件

App.vue 根组件   

main.js 入口文件 

views/pages  存放路由文件

api 统一管理接口模块   

utils 工具类 

mixin 混入

filters 过滤器 

directives 自定义指令

plugins 插件 ui

router 存放路由 

store vuex状态管理

.eslintrc.js 语法规则配置

.gitignore 源码托管过滤文件

babel.config.js 高级语法配置

package.json 项目配置文件

配置ui

傻瓜式

vue add ui名称    如：vue add vant || vant add element-ui

手动配置

完整引入 

  1. 安装 vant 
    npm i vant -S     

  2. 在main.js中引入一下代码  

    import Vue from 'vue';
    import Vant from 'vant';
    import 'vant/lib/index.css';

    Vue.use(Vant);

  3. 可以在任意的组件直接使用ui  

    <van-button type="primary">主要按钮</van-button>

按需引入    

  1. 安装 vant 按需依赖包 

    npm i vant -S  
    npm i babel-plugin-import -D

  2. 配置babel.config.js  

    // 对于使用 babel7 的用户，可以在 babel.config.js 中配置
    module.exports = {
      plugins: [
        ['import', {
          libraryName: 'vant',
          libraryDirectory: 'es',
          style: true
        }, 'vant']
      ]
    };

  3. // 插件会自动将代码转化为方式二中的按需引入形式
  
    import { Button } from 'vant';     

    App.use(Button)

项目托管到远程服务

github

gitee

gitlab

1. 直接引入 rem.js 文件

  export default function () {
  // var devicePixelRatio = 1;
  // var scale = 1 / devicePixelRatio;
  // document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
  // 7.5根据设计稿的横向分辨率/100得来
  // alert(document.documentElement.clientWidth)
  var deviceWidth = document.documentElement.clientWidth;
  // var deviceWidth = window.screen.availWidth
  // alert(navigator.userAgent)
  // alert(deviceWidth)
  // console.log(navigator.userAgent)
  if (deviceWidth > 750) {
    // deviceWidth = 750;
    deviceWidth = 7.5 * 50;
  }

  document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';

  // 禁止双击放大
  document.documentElement.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
      event.preventDefault();
    }
  }, false);
  var lastTouchEnd = 0;
  document.documentElement.addEventListener('touchend', function (event) {
    var now = Date.now();
    if (now - lastTouchEnd <= 300) {
      event.preventDefault();
    }
    lastTouchEnd = now;
  }, false);
}

2. 淘宝的适配方案

安装依赖包


  yarn add lib-flexible -S   

  yarn add  postcss-px2rem -S

在main.js 文件中引入

  import 'lib-flexible'

在vue.config.js 文件中配置 css 属性


module.exports = {
    css: {
        loaderOptions: {
            css: {},
            postcss: {
                plugins: [
                    require('postcss-px2rem')({
                        remUnit: 37.5
                    })
                ]
            }
        }
    }
}

Vue-cli3.0 项目优化

一. 项目优化策略

生成打包报告
第三方库启用 CDN
ui 组件按需加载
路由懒加载
首屏内容定制

二. 项目添加 nprogress 进度条

安装依赖包

  yarn add nprogress -S

在main.js 中导入依赖包和样式

  import NProgress from 'nprogress' 
  import 'nprogress/nprogress.css'

在axios请求拦截器和响应拦截器中配置启动和结束

// axios 请求拦截
axios.interceptors.request.use(function (config) {
  NProgress.start()
  return config
})

// axios 响应拦截
axios.interceptors.response.use(function (response) {
  NProgress.done()
  return response
})

三. 自动移除 console.log

安装依赖包

  yarn add babel-plugin-transform-remove-console -D

在 .babelrc | babel.config.js 文件中配置 plugins 插件

const prodPlugins = []
// 生产环境移除console
if (process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}
module.exports = {
  'presets': [
    '@vue/app'
  ],
  plugins: [
    [
      'import',
      {
        'libraryName': 'vant',
        'libraryDirectory': 'es',
        'style': true
      },
      'vant'
    ],
    ...prodPlugins
  ]
}

四. 生成打包报告

直接在命令行添加参数

  vue-cli-service build --report

通过可视化的 ui 面板查看报告（推荐）

在可视化的ui面板中，通过控制台和分析面板，可以方便的查看存在的问题

五. vue-cli3.0 webpack全局配置 vue.config.js

https://cli.vuejs.org/zh/config

六. 为开发模式与发布模式设置不同的打包入口

配置开发入口文件 src/main-dev.js 和发布模式入口文件 src/main-prod.js
通过 configureWebpack 或者 chainWebpack 来修改默认的配置

configureWebpack 通过对象形式操作

chainWebpack 通过链式形式操作

在 vue.config.js 文件中通过 chainWebpack 修改入口文件

module.exports = {
  chainWebpack: config => {
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-prod.js')
    })
    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-dev.js')
    })
  }
}

七. 通过 externals 加载外部 CDN 资源

配置 vue.config.js


  chainWebpack: config => {
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-prod.js')
      config
        .set('externals', {
          vue: 'Vue',
          'vue-router': 'VueRouter',
          axios: 'axios',
          nprogress: 'NProgress'
        })
    })
    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-dev.js')
    })
  }

在 index.html 文件中引入 CDN服务依赖文件

http://www.staticfile.org/

 <!-- nprogress 的样式表文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
  <!-- vant 的样式表文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.1/lib/index.css">

  <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
  <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
  <!-- nprogress 的 js 文件 -->
  <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
  <!-- moment 的 js 文件 -->
  <script src="https://cdn.staticfile.org/moment.js/2.24.0/moment.min.js"></script>
  <!-- vant 的 js 文件 -->
  <script src="https://cdn.jsdelivr.net/npm/vant@2.1/lib/vant.min.js"></script>

  ps: vant ui  引入CDN文件之后，可以直接去掉 按需引入

八. 首页内容定制

配置 vue.config.js

  chainWebpack: config => {
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', config => {
      // 配置入口文件
      config
        .entry('app')
        .clear()
        .add('./src/main-prod.js')
      // 配置CDN
      config
        .set('externals', {
          vue: 'Vue',
          'vue-router': 'VueRouter',
          axios: 'axios',
          nprogress: 'NProgress',
          moment: 'moment'
        })
      // 配置首页定制
      config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
    })
    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-dev.js')
      // 配置首页定制
      config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
      })
    })
  }

在index.html中通过流程控制是否加载CDN资源

  <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>mall-vue</title>
  <% if(htmlWebpackPlugin.options.isProd){ %>
  <title>vue-ssr</title>
  <!-- nprogress 的样式表文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />

  <!-- vant 的样式表文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.1/lib/index.css">

  <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
  <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
  <!-- nprogress 的 js 文件 -->
  <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
  <!-- moment 的 js 文件 -->
  <script src="https://cdn.staticfile.org/moment.js/2.24.0/moment.min.js"></script>
  <!-- vant 的 js 文件 -->
  <script src="https://cdn.jsdelivr.net/npm/vant@2.1/lib/vant.min.js"></script>
  <%}%>

九. 实现路由懒加载

安装依赖包

yarn add @babel/plugin-syntax-dynamic-import -D

配置 babel.config.js

  plugins: [
    '@babel/plugin-syntax-dynamic-import'
  ]

按需加载路由组件

const About = () => import(/* webpackChunkName: "about" */ './views/About.vue')

vue-cli3 配置

一、 vue-cli3中配置生成环境和开发环境

在项目的根目录创建 .env.development 和 .env.production 环境

.env.development

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = '/dev-api'

.env.production

  # just a flag
  ENV = 'production'

  # base api
  VUE_APP_BASE_API = '/prod-api'

在封装的axios网络请求中配置baseURL

const http = axios.create({
  baseURL: process.env.VUE_APP_BASE_API
})

配置package.json文件

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "build:prod": "vue-cli-service build",
  "lint": "vue-cli-service lint"
}

二、vue-cli3中配置反向代理和node服务

2.1 proxy

在vue.config.js中配置devServer的proxy属性

  module.exports = {
    devServer: {
      proxy: {
        '/api': {
          target: 'https://yys.res.netease.com',//目标地址
          ws: true, //// 是否启用websockets
          changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
          pathRewrite: { '^/api': '/' }    //这里重写路径
        }
      }
    }
  }

2.2 before

在vue.config.js中配置devServer的before属性

  module.exports = {
    devServer: {
      before(app) {
        app.get('/api/data', (req, res) => {
          res.send({
            code: 1,
            msg: [
              {
                id: 0,
                name: 'fly'
              }
            ]
          })
        })
      }
    }
  }

vue 配置