How to build multi page template scaffold with vue-cli 4.0!? This article teaches you

multipage

Github address github.com/qinouz/mult...
Build multi page template scaffold based on vue-cli 4.0!

Launch project

git clone https://github.com/qinouz/multipage.git

cd multipage

npm install

npm run dev
Copy code

catalog

✅ Generate multi page configuration

build/newUtils.js The getEntry method in generates the page path and the corresponding html object according to all html files in the directory.
var pages = utils.getEntry(['./src/module/**/*.html']);

The returned result is:

{ 'aa/as/dd/fd/ddd': './src/module/aa/as/dd/fd/ddd/ddd.html',
   'aa/ddd': './src/module/aa/ddd/ddd.html',
   'ss': './src/module/ss/ss.html' 
 }In addition, I have been engaged in front-end development for 9 years. If you have any questions or exchange experience, you can come to my button up skirt 519293536 and I will try my best to help you
 Getentrypages method var mpages= utils.getEntryPages (pages); to generate the final multi page configuration, the directory structure needs to follow certain rules. The folder name must be consistent with the main file name and the template html file name, and the hierarchy is not limited.
  ├── module
  │   └── ss
  |   |   └── ss.html
  |   |   └── ss.js
 Copy code

The returned result is:

{ 'aa/as/dd/fd/ddd':{ entry: './src/module/aa/as/dd/fd/ddd/ddd.js',
     template: './src/module/aa/as/dd/fd/ddd/ddd.html' },
  'aa/ddd':{ entry: './src/module/aa/ddd/ddd.js',
     template: './src/module/aa/ddd/ddd.html' },
  ss:{ entry: './src/module/ss/ss.js',
     template: './src/module/ss/ss.html' } }
Copy code

✅ Configure multiple environment variables

package.json The scripts in is configured with dev qa prd to execute different environments through -- mode xxx

  • Start local through npm run dev and execute development
  • Through npm run qa packaging test, perform the staging
  • Package formally and execute production through npm run prd
"scripts": {
  "dev": "vue-cli-service serve --open",
  "stage": "vue-cli-service build --mode staging",
  "build": "vue-cli-service build",
}
Copy code
Configuration introduction

VUE_APP_ The variable at the beginning of the code can be process.env.VUE_APP_ Visit. For example, VUE_APP_ENV = 'development' passed process.env.VUE_APP_ENV access. Except VUE_APP_ *In addition to variables, there are two special variables, node, that are always available in your application code_ Env and BASE_URL

Create a new. env in the project root*

  • . env local development environment configuration
NODE_ENV = development
VUE_APP_SERVICE_URL =
BASE_URL = ./

Copy code
  • . env.qa Test environment configuration
NODE_ENV = production
VUE_APP_SERVICE_URL = http://www.baidu.com
BASE_URL = /shopsystem/static/weixin/dist/
Copy code
  • . env.prd Formal environment configuration
 NODE_ENV = production
 VUE_APP_SERVICE_URL = http://www.baidu.com
 BASE_URL = /shopsystem/static/weixin/dist/
Copy code

Configure the variables of the corresponding environment. Take the local environment file. env for example. Users can modify it according to their needs

// Local environment configuration
NODE_ENV = development
VUE_APP_SERVICE_URL =
VUE_APP_TEST=test
BASE_URL = ./

Copy code

Depending on the environment, the variables will be different

// Introduce different baseApi addresses according to different environments
const instance = axios.create();
var path = process.env.VUE_APP_SERVICE_URL;
instance.defaults.baseURL = path;
Copy code

▲ back to the top

✅ rem adaptation scheme

Don't worry. The project has been configured with rem adaptation. The following is just an introduction:

The style in Vant uses px as the unit by default. If you need to use rem units, the following two tools are recommended:

PostCSS configuration

A basic configuration of postcss is provided below, which can be modified based on the project requirements

// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
  plugins: {
    postcss: {
      plugins: [
        require('postcss-pxtorem')({
          rootValue: 37.5, // Base of conversion
          selectorBlackList: [], // Ignore transform regular matches
          propList: ['*'],
        }),
      ]
    }
  }
}
Copy code

▲ back to the top

Parent change child style depth selector

When your child component uses scoped, but you want to modify the style of the child component in the parent component, you can use > > >

<style scoped>
.a >>> .b { /* ... */ }
.a {
    /deep/ .b {
        ...
    }
}
</style>
Copy code

▲ back to the top

✅ Vuex status management

directory structure

├── store
│   ├── modules
│   │   └── app.js
│   ├── index.js
│   ├── getters.js
 Copy code

main.js Introduction

import Vue from 'vue'
import App from './App.vue'
import store from './store'
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})
Copy code

use

<script>
  import {mapGetters} from 'vuex'
  export default {
    computed: {
      ...mapGetters(['userName'])
    },

    methods: {
      // Action passed store.dispatch  Method trigger
      doDispatch() {
        this.$store.dispatch('setUserName', 'Oh, good. Let's hurry and pay attention to the official account. The organization is waiting for you.~')
      }
    }
  }
</script>
Copy code

▲ back to the top

✅ Vue-router

In this case, the hash mode is adopted, and the developer modifies the mode base according to the requirements

Note: if you use the history mode, vue.config.js The publicPath in should be modified accordingly

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
export const router = [
  {
    path: '/',
    name: 'index',
    component: () => import('@/views/home/index'), // Route lazy load
    meta: {
      title: 'home page', // Page title
      keepAlive: false // Keep alive ID
    }
  }
]
const createRouter = () =>
  new Router({
    // mode: 'history', / / if you are in history mode, you need to configure vue.config.js  publicPath
    // base: '/app/',
    scrollBehavior: () => ({y: 0}),
    routes: router
  })

export default createRouter()
Copy code

more: Vue Router

▲ back to the top

✅ Configure alias

const path = require('path')
const resolve = dir => path.join(__dirname, dir)
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)

module.exports = {
  chainWebpack: config => {
    // add alias
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
  }
}
Copy code

▲ back to the top

✅ Configure proxy cross domain

If your project needs cross domain settings, you need to call vue.config.js proxy comment and configure the corresponding parameters

module.exports = {
  devServer: {
    // ....
    proxy: {
      //Configure cross domain
      '/api': {
        target: 'https://test.xxx.com', // Domain name of the interface
        // ws: true, / / enable websockets
        changOrigin: true, // Start the agent and create a virtual server locally
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  }
}
Copy code

▲ back to the top

✅ Configure packaging analysis

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
  chainWebpack: config => {
    // Packaged Analytics 
    if (IS_PROD) {
      config.plugin('webpack-report').use(BundleAnalyzerPlugin, [
        {
          analyzerMode: 'static'
        }

All of the above? In addition, I have been engaged in front-end development for 9 years. If you have any questions or exchange experience, you can come to my button up skirt 519293536. I will try my best to help you
The text and pictures of this article come from the Internet and my own ideas. They are only for learning and communication. They have no commercial use. The copyright belongs to the original author. If you have any questions, please contact us in time for handling
Front end 5

Tags: Javascript Vue npm github git

Posted on Wed, 17 Jun 2020 23:48:16 -0400 by zonkd