preface

The technology stack used for the front end has been mentioned in the pilot, so this is a primer, starting the project and setting up the scaffolding.

Vue-admin-template is used instead of vue-element-admin because it is cleaner and easier to get used to.

start

#Cloning project
git clone https://github.com/PanJiaChen/vue-admin-template.git mlong-vue
#Into the project
cd mldong-vue
#Install dependencies
npm install

#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

#Start the service
npm run dev
Copy the code

Browser visit http://localhost:9528

Engineering instructions

The directory structure

Here is only a general list, not all.

├─ Build ├─ Public ├─ SRC ├─ API ├─ Assets ├─ Custom Components ├─ ICONS ├─ │ ├─ Router │ ├─ State Management │ ├─ Styles │ ├─ Utils Tool │ ├─ Views │ ├─ app.vue ├─ ├─ settings.js Config Item ├─ ├.js main.js start entry ├─ PermisiontestTest Related ├─.env.development Configure ├─.env.production Configure ├─.env.staging Mock Configure ├─.eslintignore Ignore the CONFIGURATION of ESLint verification rules ├─ ├─ ├─ package-lock.json Package ├─ package-config. json Vue -cli Configure.eslint.js EsLint rule Configure ├─.gitignore git Ignore ├─ package-lock.json package ├─ package-config. json vue- CLI ConfigureCopy the code

Package. json file description

{
  "scripts"{// All of these scripts can be executed by NPM run XXX"dev": "vue-cli-service serve", // corresponds to NPM run dev above"build:prod": "vue-cli-service build"// NPM run build:prod"build:stage": "vue-cli-service build --mode staging"// Notice the --mode staging here, which I'll explain in a moment...... },"dependencies": {
    "axios": "0.18.1", // a package that can be used by both development and production environments, install..... by using the command NPM instal xx --save },"devDependencies": {
    "@babel/core": "7.0.0",// A package that only the development environment can use, install..... by using the command NPM instal xx --save-dev }}Copy the code

. Env File description

  • .env.development
# just a flag
ENV = 'development'
# base api
VUE_APP_BASE_API = '/dev-api'

VUE_CLI_BABEL_TRANSPILE_MODULES = true

Copy the code
  • .env.production
# just a flag
ENV = 'production'
# base api
VUE_APP_BASE_API = '/prop-api'

Copy the code
  • .env.staging
NODE_ENV = production

# just a flag
ENV = 'staging'

# base api
VUE_APP_BASE_API = '/stage-api'
Copy the code
Env.staging file. If you need to add any other Settings, you can copy the. Env.staging file
vue-cli-service build --mode staging
Copy the code

About using the. Env configuration file

Look at SRC /utils/request.js

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})
Copy the code

If.env.staging is enabled, the above code is equivalent to

const service = axios.create({
  baseURL: '/stage-api'.// url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})
Copy the code

Notice that it replaces the single quotes as well.

About NODE_ENV in the. Env configuration file

npm run dev
# =====>NODE_ENV=development implicitly

npm run build
# =====>NODE_ENV=production

npm run build --mode staging
# =====>NODE_ENV=production specifies explicitly

Copy the code

The size of the webpack varies depending on whether NODE_ENV is being developed or produced. New. Env file, specify NODE_ENV as production explicitly.

Vue. Config. js file description

Below is a snippet of code

'use strict'
const path = require('path')
const defaultSettings = require('./src/settings.js')

function resolve(dir) {
  return path.join(__dirname, dir)
}
// SRC /settings.js if configured, use the title of Settings, if not, use the right one
Public /index.html 
const name = defaultSettings.title || 'vue Admin Template' // page title

// Port in development mode
const port = process.env.port || process.env.npm_config_port || 9528 // dev port

// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {

  publicPath: '/'.outputDir: 'dist'.assetsDir: 'static'.lintOnSave: process.env.NODE_ENV === 'development'.// Whether to use eslint
  /** * If you don't need the source map for production, you can set it to false to speed up production builds. The map file is used to compress and encrypt the code after the project is packaged. If an error is reported, the output error message cannot be accurately known which code reported the error. * With map, you can output exactly which row and column is wrong, just like unencrypted code. * * /
  productionSourceMap: false.devServer: {
    port: port, // Port in development mode
    open: true.// Whether to open the browser automatically
    overlay: {
      warnings: true.// Enable this so that esLint errors will appear on the browser
      errors: true
    },
    proxy: {		// Proxy configuration
      '/api': {
        target: 'http://api.mldong.com'.changeOrigin: true.ws: true.pathRewrite: {
          '^/api': '/'          // Everything that starts with/API is specified at target+ '/'
        }               // http://localhost:9528/api/login ==>http://api.mldong.com/login}},before: require('./mock/mock-server.js')},configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    resolve: {
      alias: {
        The '@': resolve('src')   // Directory alias
        // import App from 'src/App.vue' ==> import App from '@/App.vue'}}}}Copy the code

.eslintrc.js file description

Eslint rule configuration, it is highly recommended to enable ESLint configuration!!

Below is a snippet of code

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'.sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: ['plugin:vue/recommended'.'eslint:recommended'],
  rules: {
    "vue/max-attributes-per-line": [2, {
      "singleline": 10,
      "multiline": {
        "max": 1,
        "allowFirstLine": false}}], // it is recommended to enable ESLint validation, standard front-end code, // VScode esLint plugins will have the corresponding error, if you are not used to something, you can configure off to disable it"vue/singleline-html-element-content-newline": "off"."vue/multiline-html-element-content-newline":"off"."vue/html-closing-bracket-newline": "off". }}Copy the code

Add to the repository and push to git repository

slightly

Project source code address

  • The back-end

Gitee.com/mldong/mldo…

  • The front end

Gitee.com/mldong/mldo…

Related articles

Create a suitable for their own rapid development framework – the pilot

Build a suitable for their own rapid development framework – front-end login and routing modular

To create a suitable for their own rapid development framework – front-end section of the framework layer and CURD sample

Create a suitable for their own rapid development framework – front-end dictionary component design and implementation

Create a suitable for their own rapid development framework – front-end pull down component design and implementation

To create a suitable for their own rapid development framework – front-end selection tree component design and implementation

Build a suitable for their own rapid development framework – front-end code generator

To create a suitable for their own rapid development framework – front-end part of the authority management