Technology selection and project optimization

import 'amfe-flexible'
import '.. /.. /common/css/base.less';
import Vue from 'vue'
import App from './App.vue'
import fastclick from 'fastclick'
import VueLazyload from 'vue-lazyload'
import CreateAPI from 'vue-create-api'
import Toast from 'components/Toast.vue'
import { setupWebViewJavascriptBridge } from 'common/js/util'// cube const {Dialog} = window.cube; Vue.use(Dialog); Vue.use(CreateAPI); // yjk custom global components-toast vue.createAPI (toast,true);

fastclick.attach(document.body)
Vue.config.productionTip = falseVue.use(VueLazyload, {preLoad: 1.3, loading: require('common/img/default.png')
})

setupWebViewJavascriptBridge((bridge) => { })

new Vue({
    render: h => h(App)
}).$mount('#app');

Copy the code

The third-party library dependencies used by the project are:

  • Flexible: flexible. Js mobile terminal adaptive scheme; Mobile layout

  • Fastclick: when the touchend event is detected, the DOM custom event will immediately start to simulate a click event, and the browser after 300ms to block the real click event;

  • Vue-lazyload: vue image lazyload -vue lazyload plugin uses vue lazyload

  • Vue-create-api: Vue-create-API is a plug-in that allows vUE components to be called through the API. Make your own component library

    import CreateAPI from 'vue-create-api' import Toast from 'components/Toast.vue' Vue.use(CreateAPI); // Custom global components-toast vue.createAPI (toast, true); Can be called within js and vue files;Copy the code

Solutions for referencing external third-party libraries:

Considering that each plug-in is not very large, about 10K, if through external links to load, it is a waste of bandwidth. The solution packs this JS into a common JS file via webpack; Chunk-vendors. Js file formCopy the code

Third party component library optimization solution:

We now use the cube- UI component library; When using component libraries, you can choose to post compile and load components on demand.Copy the code
In the.babelrc file // the component library is introduced by post-compilation and is lightweight {"presets": [["env", {
      "modules": false}]."stage-2"]."plugins": [
    "transform-runtime"["transform-modules", {
        "cube-ui": {
          "transform": "cube-ui/src/modules/${member}"."kebabCase": true}}]]}Copy the code
However, in the actual development process, we found that there are not so many scenarios using the component library, and the most used is his Toast component, so this library can also be optimized; Load it from js and mount it under the Window object, load it on demand and reference it only when needed; Simple functions as far as possible with their own components to complete; // cube const {Dialog} = window.cube; Vue.use(Dialog);Copy the code
  • Preload properties

About the configuration of vue.config.js

const path = require('path'); // Introduce multi-page configuration js file; Returns pages: {multipage: {entry:'C:\\Ben\\src\\pages\\multipage/index.js',
     template:
      'C:\\Ben\\src\\pages\\multipage/index.html',
     filename: 'multipage/index.html' },
  singlepage:
   { entry:
      'C:\\Ben\\src\\pages\\singlepage/index.js',
     template:
      'C:\\Ben\\src\\pages\\singlepage/index.html',
     filename: 'singlepage/index.html' } }
     
const pages = require('./config/multipage').getPages(); // Environment variable const env = process.env.node_env; Module.exports = {// Uses/directory in the development environment because the dist root in memory is retrieved online'/'BaseUrl: env === because the entire dist directory baseUrl: env ==='development' ? '/' : '/',
    lintOnSave: false,
    productionSourceMap: false// It is enabled by default on multi-core machines. parallel: require('os').cpus().length > 1, pages, // CSS related configuration CSS: {// The default value is (development environment ensure normal CSS hot update, no separation, online environment can be extracted) // Whether to use CSS ExtractTextPlugin // extract: env ==='development' ? false : true.sourceMap: false// Enable the CSSsource maps?
        loaderOptions: {
            less: {
                javascriptEnabled: true}}, // CSS default configuration item modules:false// Enable CSS modulesforChainWebpack: config => {all CSS/pre-processor files.}, // Some configurations to ensure that the output results follow the configurationif (process.env.NODE_ENV === 'production') {
            config.module.rule('images').use('url-loader').loader('url-loader').tap(options => {
                options.name = 'static/img/[name].[hash:8].[ext]';
                return options;
            });
            config.plugin('extract-css').tap(() => [
                {
                    filename: 'static/css/[name].[contenthash:8].css',
                    chunkFilename: 'static/css/[name].[contenthash:8].css'}]); ConfigureWebpack: config => {configureWebpack: config => {if (process.env.NODE_ENV === 'production') {
            config.output.path = path.join(__dirname, './dist')
            config.output.filename = 'static/js/[name].[contenthash:8].js'
            // config.output.publicPath = '/'
            config.output.chunkFilename = 'static/js/[name].[contenthash:8].js'} // assign(config, {// webpack does not handle this, but can refer to it. In order to reduce the volume [https://segmentfault.com/a/1190000012113011] public package (https://blog.csdn.net/zlingyun/article/details/81382323) externals: [ {'vue': 'window.Vue'},
                {'vue-router': 'window.VueRouter'}
            ],
            resolve: {
                alias: {
                    The '@': path.resolve(__dirname, './src'),
                    'assets': path.resolve(__dirname, './src/assets'),
                    'common': path.resolve(__dirname, './src/common'),
                    'components': path.resolve(__dirname, './src/components'),
                    'pages': path.resolve(__dirname, './src/pages'),
                    'vue$': 'vue/dist/vue.esm.js'}}}); }};Copy the code

Configuration of package.json

{
  "name": "vue-multipage"."version": "0.1.0 from"."private": true."scripts": {
    "dev": "vue-cli-service serve --open"."lint": "vue-cli-service lint"."vue inspect > output.js": "Review the Webpack configuration of the project"."build": "vue-cli-service build"
  },
  "dependencies": {
    "amfe-flexible": "^ 2.2.1." "."axios": "^ 0.17.1"."fastclick": "^ 1.0.6"."md5": "^ 2.2.1." "."vue-create-api": "^ 0.2.0." "."vue-lazyload": "^ 1.2.6." "
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "3.0.0"."@vue/cli-plugin-eslint": "3.0.0"."@vue/cli-service": "3.0.0"."ali-oss": "^ 6.0.0"."less": "^ 3.9.0"."less-loader": "^ 4.1.0." "."postcss-px2rem": "^ 0.3.0"."vue-template-compiler": "^ 2.5.17"
  },
  "babel": {
    "presets": [
      "@vue/app"}, // eslint configuration"eslintConfig": {
    "root": true."env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential"."eslint:recommended"]."rules": {},
    "parserOptions": {
      "parser": "babel-eslint"}}, // CSS processing"postcss": {
    "plugins": {
      "autoprefixer": {}, / / is the auto-complete CSS prefix https://www.jianshu.com/p/aa3e52be303e"postcss-px2rem": {  // https://www.jianshu.com/p/21d43d6ed713
        "remUnit": 75 // Since I made the layout scheme according to IP6, I used 750/10 = 75}}},"browserslist": / / / https://www.jianshu.com/p/bd9cb7861b85 browserslist target browser configuration table"1%" >."last 4 versions"."not ie <= 8"."ios >= 7"."Android > = 4.0"]}Copy the code