A preface
1. Introduction
This is a minimalist Vue admin management background. It contains only Element UI & Axios & Iconfont & Permission Control & Lint, which are necessary to build the background.
2. Project address
- Integration solution: vue-element-admin
- Basic template: vue-admin-template
- For the desktop, run the electron-vue-admin command
- Typescript version: vue-typescript-admin-template (Credit: @armour)
- Others: awesome-project
You are advised to use the basic template for secondary development: github.com/PanJiaChen/…
3. Start development
3.1 Cloning Project
git clone https://github.com/PanJiaChen/vue-admin-template.git
3.2 Going to the Project Directory
cd vue-admin-template
3.3 Installation Dependencies
npm install
3.4 Do not directly use CNPM installation, there will be a variety of weird bugs. You can perform the following operations to solve the problem that the NPM download speed is slow
npm install --registry=https://registry.npm.taobao.org
3.5 Starting the Service
npm run dev
Binary directory structure
├─ ├─ Public │ ├─ Favicon. Ico # FavIcon icon │ ├─ Public │ Favicon │ ├─ Favicon │ ├─ ├─ SRC # Source code │ ├─ API # All Request │ ├─ Assets # ├─ Directive # │ ├── Filters # Global Filter │ ├─ All SVG ICONS │ ├─ lang # International Language │ ├─ Layout # Global Layout │ ├─ The router # routing │ ├ ─ ─ store # global store management │ ├ ─ ─ styles # global style │ ├ ─ ─ utils # global public method │ ├ ─ ─ vendor # public vendor │ ├ ─ ─ views # │ ├── ├─ ├─ ├─ ├─ ├── env.xxx # Environment Variables Config ├─.esLintrc.js # esLint Config Item ├─.babelrc # babel-loader Config ├─.travis. Yml # Automated CI Config ├─ vue.config.js # ├─ ├─ ├─ download.json # download.jsonCopy the code
SRC setings.js file
- You can configure the page title
- You can configure whether to display the logo in the sidebar
See the code for details:
--> src/settings.js module.exports = { title: 'flower shorts the background management system based on template, / * * * @ type {Boolean} true | false * @ description been fix the header Whether repair head * / fixedHeader: False, / * * * @ type {Boolean} true | false * @ description been show the logo in the sidebar is shown in the sidebar logo * / sidebarLogo: false }Copy the code
Vue. Config. js file configuration
Vue. Config. js is a vue-cli configuration file, which is an optional configuration file that is automatically loaded by @vue/cli-service if it exists in the root directory of the project (the same as package.json).
Configuration options
- publicPath
Type: string
Default: ‘/’
The basic URL used to deploy the application package is the same as the output.publicPath of the Webpack itself.
This value can also be set to an empty string (”) or a relative path (‘./’), so that all resources are linked to a relative path, so that the output package can be deployed in any path.
- outputDir
- configureWebpack
Type: Object | Function
If the value is an object, it is merged into the final configuration using webpack-Merge.
If the value is a function, the parsed configuration is accepted as an argument. This function can modify the configuration and return nothing, or it can return a cloned or merged version of the configuration.
- chainWebpack
Type: Function
Is a function that takes a Webpack-chain-based ChainableConfig instance. Allows for more fine-grained changes to the internal WebPack configuration.
- devServer
Type: Object
All webpack-dev-server options are supported. Note:
Some values like host, port, and HTTPS may be overridden by command line arguments.
Some values like publicPath and historyApiFallback should not be modified because they need to be synchronized with the publicPath of the development server to work properly.
- devServer.proxy
Type: string | Object
If your front-end application and back-end API server are not running on the same host, you need to proxy API requests to the API server in your development environment. This problem can be configured with the devServer.proxy option in vue.config.js
Detailed notes:
'use strict' // use strict // * VUe-cli configuration file, which is an optional configuration file, is automatically loaded by @vue/cli-service if it exists in the root directory of the project (the same as package.json). Const path = require('path') // Const defaultSettings = require('./ SRC /settings.js') // 1.1 path.join(__dirname, Dir)} / / 2.1 to obtain the title of the file inside const name = defaultSettings. Title | | 'vue Admin Template / / page title / / If your port is set To 80, // If your port is set to 80, // Use Administrator PRIVILEGES to execute the command line. // For example, Mac: sudo NPM run // You can change the port by the following methods: // port = 9528 npm run dev OR npm run dev --port = 9528 const port = process.env.port || process.env.npm_config_port || 9528 / / dev port / / All the configuration item explanations can be find in HTTP: / / https://cli.vuejs.org/config/ / / export a contains the options object module.exports = { /** * You will need to set publicPath if you plan to deploy your site under a sub path, * If you plan to deploy sites under subpaths, you need to set publicPath, * the for example making Pages. If you plan to deploy your site to https://foo.github.io/bar/, * such as making page. If you plan will be deployed to the site https://foo.github.io/bar/ * then publicPath should be set to "/ bar/". * so publicPath should be set to"/bar/". * In most cases please use '/' !!! * In most cases use '/'!! * * the Detail: https://cli.vuejs.org/config/#publicpath details: https://cli.vuejs.org/config/ / publicpath publicpath * : '/', // Base path outputDir: 'dist', // Build time output directory assetsDir: 'static', // place generated static resources (js, CSS,img,fonts) directory. lintOnSave: process.env.NODE_ENV === 'development', productionSourceMap: false, // 3. DevServer.proxy : // If your front-end application and back-end API server are not running on the same host, you need to proxy API requests to the API server in the development environment. // This problem can be configured using devserver.proxy in vue.config.js. devServer: { port: port, open: true, overlay: { warnings: false, errors: true }, before: }, // webpack configureWebpack: // Provide the app's title in webpack's name field, so that // Provide the app's title in webpack's name field, Email exchange with email exchange in index.html to inject the correct title. // It can be used to inject the correct title through index.html. name: name, resolve: { alias: { '@': Resolve (' SRC ')}}}, // 5. ChainWebpack is a function that takes an instance of a chainableConfig based on WebPackchina, allowing more fine-grained changes to the internal WebPack configuration. chainWebpack(config) { // it can improve the speed of the first screen, It is recommended to enable preloading config.plugin('preload').tap(() => [{rel: 'preload', // to ignore runtime.js // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171 fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/], include: }]) // When there are many pages, it will cause too many requests. Config. Plugins. delete('prefetch') // set svG-sprite-loader config.module. rule(' SVG ') .exclude.add(resolve('src/icons')) .end() config.module .rule('icons') .test(/\.svg$/) .include.add(resolve('src/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]'}).end() // process.env config. when(process.env.node_env! == 'development', config => { config .plugin('ScriptExtHtmlWebpackPlugin') .after('html') .use('script-ext-html-webpack-plugin', [{ // `runtime` must same as runtimeChunk name. default is `runtime` inline: /runtime\..*\.js$/ }]) .end() config .optimization.splitChunks({ chunks: 'all', cacheGroups: { libs: { name: 'chunk-libs', test: /[\\/]node_modules[\\/]/, priority: 10, chunks: 'initial' // only package third parties that are initially dependent }, elementUI: { name: 'chunk-elementUI', // split elementUI into a single package priority: 20, // The weight needs to be larger than libs and app or it will be packaged into libs or app Otherwise it will be packaged as libs or app test: /[\\/]node_modules[\\/]_? Elder-ui (.*)/ / in order to adapt to CNPM}, Commons: {name: 'chunk-commons', test: Resolve (' SRC /components'), // can customize your rules minChunks: 3, // Minimum common number 5, reuseExistingChunk: true } } }) // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk config.optimization.runtimeChunk('single') } ) } }Copy the code
Index.js in the Build file
- chalk
Chalk is a NPM package that can modify the character style of the terminal output to improve the identification of the information output at the terminal
- process
Process is a global module of Node. You can use it to get node process-related information, such as command line arguments when running the Node program. Or setting process-related information, such as setting environment variables.
- express
Express connects to middleware connect, which maintains a middleware stack, stack: data structure. Each call to use pushes an object with a path and a handler to the stack of the app instance.
Detailed notes:
{run} = require('runjs') const {run} = require('runjs') Const chalk = require('chalk') // 3. Const config = require('.. /vue.config.js') // 4. Process is a global module of node. You can use it to get node process-related information, such as command line arguments when running the Node program. Or setting process-related information, such as setting environment variables. Process. argv takes command line arguments and returns an array. Parameter 0: / / / Users/a /. NVM/versions/node/v6.1.0 / bin/node / / parameter 1: / Users/a/Documents/argv. Js 2: / / parameters - env / / 3 parameters: Production const rawArgv = process.argv.slice(2) const args = rawargv.join (' ') // 4.2 process.env if (process.env.npm_config_preview || rawArgv.includes('--preview')) { const report = rawArgv.includes('--report') Run (' vue-cli-service build ${args} ') const port = 9526 // 3.1 Basic path to import configuration files const publicPath = config.publicPath // 5. Express connects to middleware connect, which maintains a middleware stack, stack: data structure. Each call to use pushes an object with a path and a handler to the stack of the app instance. var connect = require('connect') // 6. Implement static resource access, introduce static resource access module, serviceStatic return value is a method, Var serveStatic = require('serve-static') const app = connect() app.use(publicPath, serveStatic('./dist', { index: ['index.html', '/']}) app.listen(port, function () {// 2.1 The information printed by the terminal can be modified by using chalk. Green () to improve information identification. console.log(chalk.green(`> Preview at http://localhost:${port}${publicPath}`)) if (report) { console.log(chalk.green(`> Report at http://localhost:${port}${publicPath}report.html`)) } }) } else { run(`vue-cli-service build ${args}`) }Copy the code