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

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

• √ Vue-cli4
• √ generate multi page configuration according to directory structure
• √ configure multiple environment variables
• √ rem adaptation scheme
• √ Vuex status management
• √ Vue-router
• √ configure alias
• √ configure proxy across domains
• √ configuration packaging analysis

✅ 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:

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

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-pxtorem Is a postcss plug-in for converting units to rem
• lib-flexible Used to set the rem reference value

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

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

▲ back to the top

✅ Vuex status management

directory structure

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 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

17 June 2020, 23:48 | Views: 7252