Single Project and Multiple Projects — Version H5 (for Vue)

  • Under a single project, multiple sub-projects are independent of each other and can share the configuration of the project and resources under the common
  • It is suitable for rapid development H5 projects with similar structure and high code coupling
  • Making: github.com/mr-co-idea/…

Engineering manual

1. Instructions

A. npm run [dev/build/…] [Project name]

  • The project name is optional

eg: npm run dev demo or npm run dev

B. NPM run create [project name]

  • The project name is optional

Eg: NPM run create newproject or NPM run create eg: ‘Copies the configuration in demo.json by default

Second, the configuration of sub-projects

  • In the fileBuild /project/[project name].jsonConfiguration items in
  • Can customize the startup environment, eg: testDev, note: must contain in a custom instruction dev/dev | build/build
  • Dev stands for development and build stands for production

3. Instructions for use

1. Import files

  • ‘@common’ -> ‘common folder path ‘
  • ‘@images’ -> ‘Images folder path under common’
  • ‘@project’ -> ‘subproject folder path’
  • ‘@modules’ -> ‘Modules folder path in a subproject’
  • ‘@views’ -> ‘Views folder path in subproject’
  • ‘@providers’ -> ‘providers folder path in subproject’
  • If you want to customize it, add it in webpack.base.js

2. Register components in Common

  • Components in the component/index, js common/components/index is introduced. The CPT. Js createPlugins method
  • CreatePlugins (‘cpt-form’,’demo’), use the component name as an argument to the function,cpt-You can write without writing
  • Method callbacks are introduced into main.js and registered with vue.use (func)

3. Usage description of http-service.base.js in common

  • Unnecessary reference

In the createRequest function, there are three parameters, none of which are required, respectively

BaseURL: indicates the request address. Req: indicates that the request interceptor existing in the request can be overwritten. Res: indicates that the request interceptor existing in the request can be overwritten

4. Create common components

  • You can build with.vue,.jsx,.tsx
  • See the example in Common/Components /cpt_demo

I. Technical guide

  • webpack4.x + vue2.x + vant
  • babel7 + postcss8
  • child_process + inquirer
  • Sass + less (optional)
  • JSX + TS (optional)

Second,

A. Directory structure (it is recommended to use the viewer to view)

| - build | - config | -- webpack. Base, js (public) | -- webpack. Dev. Js (development environment configuration) | -- webpack. Prod. Js (the production environment configuration) | -- create. Js (create a new subproject script) | -- utils. Js (tools) | - project (component configuration) | - demo. Json | - (component configuration file) ProjectA. Json | - GUI (reserved: See bottom) | - webpack. Config. Js (configuration summary) | - dist (packaged output directory) | - public | -- index. | - HTML server (service: Introduced separately) | -- - the SRC directory (development) | - common (public resource directory) | - assets (static resource) | - components (public) | - cpt_form (form components, separately) | - cpt_demo | - CPT - demo. Vue | -- - demojsx. CPT JSX (component JSX written) | -- - demotsx1. CPT TSX (component TSX official library written) | -- - demotsx2. CPT TSX (component TSX writing community, Based on the official library) | -- othens... | - index. CPT. Js (component registration) | - modules | - will request (network) | -- HTTP - service. Base. Js | -- -- stores (store, introduced the subprojects, ) and registration by namespace | - pages | - utils | - project (component directory) | - demo | - entry | -- index. Js (entry document) | - modules | - assets | - Will - service. | - HTTP js (request) | -- interface. Js (request interface) | - the router | -- index. The router, js | - store | -- index. Store. Js (strict mode) | -- loginStore. Js | - utils | - views | - components | -- app. Vue | -- index. Vue | - projectA | - (directory structure as above) Babelrc (Babel) | -- postcss. Config. Js (postcss configuration) | -- command. Js (project startup scripts) | -- tsconfig. Json configuration file (ts) | -- package. Json | - package - lock. Json | -- readme. Md (project build documentation) | - readme. Md (project using document)Copy the code

B. Engineering construction

1. Create a directory structure
2. Create a project:npm init
3. Install dependencies:
  • Webpack (4.x version requires Webpack – CLI installation)
npm install webpack webpack-cli webpack-dev-server webpack-merge -D
Copy the code
  • Webpack plug-in
npm install html-webpack-plugin clean-webpack-plugin optimize-css-assets-webpack-plugin mini-css-extract-plugin -D
Copy the code
  • Webpack mobile debugging plug-in
npm install vconsole-webpack-plugin -D
Copy the code
  • Webpack based loader
npm install style-loader css-loader url-loader -D
Copy the code
  • babel
npm install @babel/core @babel/preset-env @babel/plugin-transform-runtime babel-loader -D
Copy the code
  • postcss
npm install postcss postcss-load-config postcss-loader -D
Copy the code
  • vue
npm install vue vuex vue-router axios vant -S
Copy the code
npm install vue-loader vue-template-compiler -D
Copy the code
  • Project script dependency
npm install inquirer chalk cross-env -D
Copy the code
  • H5 adaptation
npm install autoprefixer postcss-pxtorem amfe-flexible -D
Copy the code
  • Less + sass (optional)
npm install less less-loader node-sass sass-loader -D
Copy the code
  • JSX (optional)
npm install babel-plugin-import babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx @babel/helper-module-imports babel-helper-vue-jsx-merge-props -D
Copy the code
  • Ts (optional)
npm install typescript ts-loader  -D
Copy the code
  • TSX (optional)
npm install vue-tsx-support -D
Copy the code
npm install vue-class-component vue-property-decorator -S
Copy the code
4. Configuration project:
  • config/utils.js
const fs = require('fs'), path = require('path'), chalk = require('chalk'); @param {String} project * @returns {Object} */ const readJson = (project) => {let data = {}; try { data = fs.readFileSync(`./build/project/${project}.json`, { encoding: 'utf-8' }); } catch (e) { console.info(e); Console.info (chalk. Red (' failed to read configuration file, default Settings ')); } return Object.assign({}, JSON.parse(data)); }; * @param {Object} env * @returns {Object} */ const processEnv = (env) => {const env_final = {}; const keys = Object.keys(env); keys.forEach(e => { env_final['process.env.' + e] = JSON.stringify(env[e]); }) return env_final; }; /** * copy file * @param {*} SRC * @param {*} DST */ const copy = (SRC, DST) => {const path = fs.readdirsync (SRC); path.forEach(e => { const src_final = src + '/' + e; const dst_final = dst + '/' + e; fs.stat(src_final, (err, stats) => { if (err) throw err; if (stats.isFile()) { let readable = fs.createReadStream(src_final); let writeable = fs.createWriteStream(dst_final); readable.pipe(writeable); } else if (stats.isDirectory()) { checkDirectory(src_final, dst_final, copy); } }) }) } const checkDirectory = (src, dst, callback) => { fs.access(dst, fs.constants.F_OK, err => { if (err) { fs.mkdirSync(dst); callback(src, dst); } else { callback(src, dst); @param {String} EN * @param {String} CN */ const createJson = (EN, CN) => { const file = path.join(__dirname, `.. /project/${EN}.json`); const content = JSON.parse(fs.readFileSync(path.join(__dirname, '.. /project/demo.json'), { encoding: 'utf-8' })); content.base.name = CN; fs.writeFile(file, JSON.stringify(content), err => { if (err) throw err; Console. info(chalk. Green (' Configuration file created successfully! * @param {String} EN */ const copyDir = (EN) => {fa.mkdirsync (path.join(__dirname, '.. /.. /server/${EN}`)) } module.exports = { processEnv, readJson, checkDirectory, copy, createJson, copyDir }Copy the code
  • webpack.config.js
const common = require('./config/webpack.base'), development = require('./config/webpack.dev'), product = require('./config/webpack.prod'), { merge } = require('webpack-merge'), { readJson } = require('./config/utils'); module.exports = env => { const mode = env.NODE_ENV; const project = process.env.project; const config = readJson(project); const config_base = Object.assign({ project: project, mode }, config.base), config_dev = Object.assign({ project: project }, config.development), config_prod = Object.assign({ project: project }, config.production); if (mode.indexOf('development') ! = -1) { return merge(common(config_base), development(config_dev), { mode }) } else if (mode.indexOf('production') ! = -1) { return merge(common(config_base), product(config_prod), { mode }) } }Copy the code
  • webpack.base.js
//webpack public profile const path = require('path'), VueLoaderPlugin = require(' vuue -loader/lib/plugin'), VConsole = require('vconsole-webpack-plugin'); module.exports = config => { const $ = Object.assign({ name: 'newProject', outPath: '/', }, config); let _plugins = [ new HtmlWebpackPlugin({ title: config.name, template: path.resolve(__dirname, '../../public/index.html') }), new VueLoaderPlugin() ]; $.mode.indexof ('test')! = 1? _plugins.push(new VConsole({ enable: true })) : null; const include = [ path.join(__dirname, `../../src/common`), path.join(__dirname, `../../src/project/${$.project}`) ]; const exclude = [ path.join(__dirname, '../../node_modules') ]; Return {entry: {main: './ SRC /project/${$.project}/entry/index.js'},// output: {filename: 'js/[name].[hash:5].js', path: path.resolve(__dirname, `.. /.. / dist / ${$. Project + '/' + $. OutPath} `)}, the module: {rules: [/ / parsing js, JSX {test: / \. (js | JSX) $/, use: [' Babel - loader '], include: include and exclude: exclude}, analytical ts, / / TSX {test: / \. (ts | TSX) $/, use: ['babel-loader', 'ts-loader'], include: include, exclude: exclude}, // parse HTML file {test: /\.html$/, include: [path. Join (__dirname ` / public `)], loader: 'HTML - loader'}, analytical vue file {/ / test: / \. Vue $/, use: [' vue - loader '], include: ... the include, exclude...}, {/ / parsing resources test: / \. (JPG | PNG | | GIF jpeg) $/, use: [{loader: 'url - loader, the options: { esModule: false, limit: 50000 } } ], include: include, exclude: exclude } ] }, resolve: { extensions: ['.js', '.vue', '.json', '.jsx', '.ts', '.tsx'], alias: { "@common": path.join(__dirname, '.. /.. /src/common'), "@rules": path.join(__dirname, '.. /.. / SRC/common/components/cpt_form/rules'), / / the form component configuration "@ images" : path. Join (__dirname, '.. /.. /src/common/assets/images'), "@project": path.join(__dirname, `.. /.. /src/project/${$.project}`), "@modules": path.join(__dirname, `.. /.. /src/project/${$.project}/modules`), "@views": path.join(__dirname, `.. /.. /src/project/${$.project}/views`), "@providers": path.join(__dirname, `.. /.. /src/project/${$.project}/modules/providers`), } }, plugins: _plugins } }Copy the code
  • webpack.dev.js
const path = require('path'), webpack = require('webpack'), { processEnv } = require('./utils'), { merge } = require('webpack-merge'); module.exports = config => { const publicPath = config.publicPath || ''; Const $= merge({env: {'BASE_URL': '/ API '}, outPut_publicPath: publicPath? publicPath + '/' : '', devServer: { contentBase: path.join(__dirname, '.. /public'), open: true, openPage: publicPath ? publicPath.split('/')[1] + '/' : '', publicPath: publicPath + '', port: 8080, host: 'localhost', disableHostCheck: true, proxy: { '/api': { target: 'localhost:3000', pathRewrite: { '^/api': '' } } } } }, config); const include = [ path.join(__dirname, `../../src/common`), path.join(__dirname, `../../src/project/${$.project}`) ]; const exclude = [ path.join(__dirname, '../../node_modules') ]; return { mode: 'development', devtool: 'inline-source-map', output: { publicPath: $.outPut_publicPath }, module: { rules: [ { test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'postcss-loader' } ], include: [ ...include, ...exclude ] }, { test: /\.less$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'postcss-loader' }, { loader: 'less-loader' } ], include: include, exclude: exclude }, { test: /\.(sa|sc)ss$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'postcss-loader' }, { loader: 'sass-loader' } ], include: include, exclude: exclude } ] }, devServer: $.devServer, plugins: [ new webpack.DefinePlugin(processEnv($.env)), ] }; }Copy the code
  • webpack.prod.js
const path = require('path'),
{ CleanWebpackPlugin } = require('clean-webpack-plugin'),
MiniCssExtractPlugin = require('mini-css-extract-plugin'),
OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"),
{ processEnv } = require('./utils'),
webpack = require('webpack');

module.exports = config => {

const $ = Object.assign({
	env: {
		"BASE_URL": '/api'
	}
}, config);

const include = [
	path.join(__dirname, `../../src/common`),
	path.join(__dirname, `../../src/project/${$.project}`)
];
const exclude = [
	path.join(__dirname, '../../node_modules')
];

return {
	mode: 'production',
	optimization: {
		splitChunks: {
			chunks: 'all',
			cacheGroups: {
				vendor: {
					name: 'vendor',
					test: /[\\/]node_module[\\/]/,
					priority: -10,
					chunks: 'initial'
				}
			}
		}
	},
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [
					{ loader: MiniCssExtractPlugin.loader },
					{ loader: 'css-loader' },
					{ loader: 'postcss-loader' }
				],
				include: [
					...include,
					...exclude
				]
			},
			{
				test: /\.less$/,
				use: [
					{ loader: MiniCssExtractPlugin.loader },
					{ loader: 'css-loader' },
					{ loader: 'postcss-loader' },
					{ loader: 'less-loader' }
				],
				include: include,
				exclude: exclude
			},
			{
				test: /\.(sa|sc)ss$/,
				use: [
					{ loader: MiniCssExtractPlugin.loader },
					{ loader: 'css-loader' },
					{ loader: 'postcss-loader' },
					{ loader: 'sass-loader' }
				],
				include: include,
				exclude: exclude
			},
		]
	},
	plugins: [
		new CleanWebpackPlugin(),
		new MiniCssExtractPlugin({
			filename: 'css/[name].[hash:5].css'
		}),
		new OptimizeCSSAssetsPlugin(),
		new webpack.DefinePlugin(processEnv($.env))
	]
};
}
Copy the code
  • create.js
const { checkDirectory, copy, createJson, copyDir } = require('./utils'), path = require('path'); const dir = '.. /.. /src/project/demo'; const _project_EN = process.argv[2]; const _project_CN = process.argv[3]; checkDirectory(path.join(__dirname, dir), path.join(__dirname, '.. /.. /src/project/' + _project_EN), copy); createJson(_project_EN, _project_CN);Copy the code
  • command.js
Const {exec} = require('child_process'), fs = require('fs'), inquirer = require('inquirer'), chalk = require('chalk'); // The command line argument const _params_env = process.argv[2]; // Environment const _params_project = process.argv[3]; // name let _cmd; / / instructions if (_params_env indexOf (' dev '| |' dev)! = -1) { _cmd = `cross-env project= webpack-dev-server --hot --open --env.NODE_ENV=${_params_env === 'dev' ? 'development' : _params_env} --config build/webpack.config.js --color`; } else if (_params_env.indexOf('build' || 'Build') ! = -1) { _cmd = `cross-env project= webpack --env.NODE_ENV=${_params_env === 'build' ? 'development' : _params_env} --config build/webpack.config.js --color`; }; /** * @returns {Array<String>} files */ const readDir = () => {const files = fs.readdirsync ('./ SRC /project/') return files; * @param {String} _cmd * @param {String} _project * @param {String} _env */ const runCmd = (_cmd, _project, _env) => { const _list = _cmd.split("project="); const _cmd_run = _list[0] + `project=${_project} ` + _list[1]; const workerProcess = exec(_cmd_run, function (error, stdout, stderr) { console.info(chalk.red(error)) }); workerProcess.stdout.on('data', function (data) { console.log(data); }); workerProcess.stderr.on('data', function (data) { console.log('stderr: ' + data); }); } /** * start project * @param {String} _cmd * @param {String} _project * @param {String} _env */ const runProject = (_cmd, _project, _env) => { const msg = _env.indexOf('production' || 'Build') === -1 ? 'Please select a project to start' : 'Please select a project to package '; if (_project) { const dirList = readDir(); If (dirlist.indexof (_project) < 0) {console.info(chalk. Red)); Console.info (chalk. Red ('error: please check if the project name is entered incorrectly or if the subproject directory exists '); } else { runCmd(_cmd, _project, _env); } } else { let dirList = readDir(); DirList. Push (' cancelled '); Inquirer. Prompt ({type: 'list', name: 'project', message: MSG, choices: dirList, // Optional options default: 'demo'}). Then (answers => {if (answers. Project === "cancel ") return; runCmd(_cmd, answers.project, _env) }); }}; const createAsk = (ask, en) => { inquirer.prompt(ask).then(answers => { const CN = answers.CN; const EN = en || answers.EN; const workerProcess = exec('node ./build/config/create ' + EN + ' ' + CN, function (error, stdout, Stderr) {if (error) {console.info(chalk. Red (' create failed! ')); throw error; } else {console.info(chalk. Green (CN + 'create complete! ')); }}); Workerprocess.stdout. on('data', function (data) {console.info('stdout: ', data); }) workerProcess.stderr.on('data', function (data) {console.info('stderr: ', data); })})} / / to run the program if (_params_env = = = 'create') {let _ask = [{type: 'input' name: 'CN' message: }] if (_params_project) {createAsk(_ask, _params_project); } else {_ask.push({type: 'input', name: 'EN', message: 'please input the name of the project to be created ', default: 'unnamed'}); createAsk(_ask, null) } } else { runProject(_cmd, _params_project, _params_env); }Copy the code
  • .babelrc
{
"presets": [
	[
		"@babel/preset-env",
		{
			"targets": {
				"browsers": [
					"defaults"
				]
			}
		},
		"env"
	]
],
"plugins": [
	[
		"import",
		{
			"libraryName": "vant",
			"libraryDirectory": "es",
			"style": true
		}
	],
	"transform-vue-jsx",
	"@babel/plugin-transform-runtime"
]
}
Copy the code
  • postcss.config.js
module.exports = { plugins: [ require('autoprefixer')({ overrideBrowserslist: [' Android > = 4.0 ', 'ios > = 8']}), require (' postcss - pxtorem) ({rootValue: 37.5, / / design based on 375 px wide propList: [' * ']})]}Copy the code
  • build/project/demo.json
{" base ": {" name" : "the project name {demo}", "outPath" : "/"}, "development" : {" env ": {" BASE_URL" : "/ API", "demo" : "..." , "others": "..." }, "devServer": { "open": true, "port": 8080, "host": "localhost", "disableHostCheck": true, "proxy": { "/api": { "target": "http://localhost:3000", "pathRewrite": { "^api": "" } } } } }, "production": {}, "testDev": {}, "testBuild": {} }Copy the code
  • public/index.html
<! DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <div id="app"></div> </body> </html>Copy the code
  • Tsconfig. json (optional)
{
"compilerOptions": {
	"jsx": "preserve",
	"jsxFactory": "VueTsxSupport",
	"target": "ES6",
	"outDir": "./dist/",
	"sourceMap": true,
	"experimentalDecorators": true,
	"moduleResolution": "node"
},
"include": [
	"src/**/*.ts",
	"src/**/*.tsx",
	"src/**/*.vue",
],
"exclude": [
	"node_modules"
]
}
Copy the code
5. Configuration items:
  • Public sector
  • resources
  • providers/http-service.base.js
const qs = require('qs'); const createRequest = (baseURL, req, res) => { const request = import('axios')({ baseURL: baseURL ? baseURL : '', timeout: 60000, }); req ? req(request) : request.interceptors.request.use(config => { if (config.method === 'post') { config.data = qs.stringify(config.data); }; return config }, error => { return Promise.reject(error) }); res ? res(request) : request.interceptors.response.use(response => response.data, Error => {if (error && error.response) {switch (error.response.status) {case 400: console.log(' error request ') break; Case 401: console.log(' Unauthorized please login again ') break; Case 403: console.log(' access denied ') break; Case 404: console.log(' request error, resource not found ') break; Case 405: console.log(' request method not allowed ') break; Case 408: console.log(' Request timeout ') break; Case 500: console.log(' Server error ') break; Case 501: console.log(' network not implemented ') break; Case 502: console.log(' network error ') break; Case 503: console.log(' service unavailable ') break; Case 504: console.log(' network timeout ') break; Case 505: console.log(' HTTP version does not support this request ') break; Default: console.log(' link error ${error.response.status} ') break; } } return Promise.reject(error.response) }); return request }; export default createRequestCopy the code
  • components
  • index.cpt.js
import cpt_form from './cpt_form/cpt-form'; import cpt_demo from './cpt_demo/cpt-demo.vue'; import cpt_demojsx from './cpt_demo/cpt-demo.jsx'; import cpt_demotsx_one from './cpt_demo/cpt-demo1.tsx'; import cpt_demotsx_two from './cpt_demo/cpt-demo2.tsx'; const map = new Map([ ["cpt-form", cpt_form], ["cpt-demo", cpt_demo], ["cpt-demo-jsx", cpt_demojsx], ["cpt-demotsx-one", cpt_demotsx_one], ["cpt-demotsx-two", cpt_demotsx_two], ]) const createPlugins = (... cptName) => { function plugins(Vue) { for (let item of cptName) { /^cpt-/.test(item) ? item : (item = 'cpt-' + item); Vue.component(item, map.get(item)) } }; return plugins; } export default createPluginsCopy the code
  • cpt_form
See the Form component documentation for detailsCopy the code
  • subprojects
  • entry/index.js
import Vue from 'vue'; import router from '@modules/router/index.router'; import store from '@modules/store/index.store' import App from '@views/app.vue' import 'amfe-flexible'; Import 'vant/lib/icon/local. CSS 'import' vue-tx-support /enable-check'//(optional) import {plugins, commonPlugins } from '@views/components/index' Vue.use(commonPlugins) Vue.use(plugins) new Vue({ el: '#app', router, store, render: h => h(App) });Copy the code
  • modules
  • providers/http-service.js
import createRequest from `@common/modules/providers/http-service.base`

const request = createRequest(process.env.BASE_URL)

export default request
Copy the code
  • providers/interface.js
import request from './http-service'

export function test(params) {
	return request({
		url: '/test',
		method: 'POST',
		data: params
	})
};
Copy the code
  • rooter/index.router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import index from '@views/index.vue'

Vue.use(VueRouter)

const routes = [
	{
		name: 'index',
		path: '/',
		component: index,
		meta: {
			title: 'index',
			requireAuth: true,
			keepAlive: true
		}
	}
];

const router = new VueRouter({
	routes
})

export default router
Copy the code
  • store/index.store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
	state: {
		rootVal: ''
	},
	getters: {
		getRootVal(state) {
			return state.rootVal;
		}
	},
	mutations: {
		changeRootVal(state, payload) {
			state.rootVal = payload;
		}
	},
	actions: {},
	modules: {
		loginStore: import('./loginStore')
	},
	strict: true
})
Copy the code
  • store/loginStore.js
export default {
	namespaced: true,
	state: {
		content: ''
	},
	getters: {
		getLoginContent(state, getters, rootVal, rootGetters) {
			return state.content
		}
	},
	mutations: {
		changeLoginContent(state, payload) {
			state.content = payload;
		}
	},
	actions: {}
}
Copy the code
  • views
  • components/index.js
import createPlugins from '@common/components/index.cpt'

const commonPlugins = createPlugins('cpt-form', 'demo');

const plugins = (Vue) => {
	Vue.component('cpt', import('./cpt'));
}

export {
	commonPlugins,
	plugins
}
Copy the code
  • components/cpt.vue
See components under CommonCopy the code
  • app.vue
<template> <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="! $route.meta.keepAlive"></router-view> </div> </template>Copy the code
  • index.vue
Copy the code
6. Add instructions:

package.json


  "scripts": {
    "dev": "node ./command dev",
    "build": "node ./command build",
    "testDev": "node ./command testDev",
    "testBuild": "node ./command testBuild",
    "create": "node ./command create"
  },
Copy the code

Webpack optimization (optional)

Code separation – dynamic loading

  • npm install @babel/plugin-syntax-dynamic-import -D
  • . Babelrc added 
    plugins:[
   "@babel/plugin-syntax-dynamic-import"
]
Copy the code
  • Webpack. Base. Js 
    output:{
  chunkFilename:'js/[name].[hash5].js'
}
Copy the code

To increase the

  • Tree – shaking configuration
  • jest
  • eslint

Design concept

  • Function modular partition, reduce the coupling between modules
  • Increase code flexibility and reusability
  • Layers: base layer and business layer

Plan the iterations

  • Vue3 + Vite + rollup build

added

version

  • If you want to use WebPack 5.x, use vue3+ VUE-loader16

GUI

  • Vite + VUe3 + ANTD + rollup + KOA was used for construction
  • Project startup, project management, project document management and view can be carried out through UI
  • See GUI Project for details

Form component encapsulation

  • This will be explained in a separate document

Serve Simulates the background service

  • Why not mock?

Considering that in the development environment, the submitted data can be stored after the form page is filled in and can be read directly next time, koA is used for flexibility

  • Serve will be stored separately and can be put into the project during development. For details, see Serve Project