instructions

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.

The current version is V4.0 + built on vuE-CLI. If you want to use an older version, you can switch to tag/3.11.0, which does not rely on VUe-CLI.

Project address: gitee.com/panjiachen/…

Project directory structure

│ ├─ Build │ Automatic Build │ ├─ Build │ Automatic Build │ ├─ Build │ Automatic Build │ │ ├─ FavIcon │ favIcon │ favIcon │ favIcon │ favIcon │ favIcon │ favIcon │ favIcon │ FavIcon │ FavIcon │ └ ─ ─ index. The HTML # HTML templates ├ ─ ─ the SRC # source │ ├ ─ ─ API request # all axios │ ├ ─ ─ assets # static resource such as theme font │ ├ ─ ─ components # global public components │ ├ ─ ─ Directive # │ ├── Filters # │ ├── ICONS # ├─ Lang # International Language │ ├─ Layout # Layout │ ├─ Router # Route │ ├─ Style # ├─ Utils # Public Method │ ├─ Vendor # Public │ ├─ Style # Public Style │ ├─ Utils # Public Method │ ├─ ├── ├─ exercises, ├─ exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises, exercises ├─.env.xxx # ├─.esLintrc.js # esLint ├─.babelrc # babel-loader ├─.travis ├─ ├─ ├─ ├─ download.json # Download.json # ├─ ├─ download.txt # Download.txt # Download.txt # Download.txt # Download.txtCopy the code

Engineering structures,

  1. Enter the workspace

  2. Setting up the infrastructure

    # # cloning project git clone https://gitee.com/PanJiaChen/vue-admin-template.git into the project directory CD vue - admin - # template installation depend on NPM install # Do not directly use CNPM to install dependencies, there will be a variety of weird bugs. Can be solved through the following NPM slow download speed of NPM install service - registry=https://registry.npm.taobao.org # start NPM run devCopy the code

    Browser: http://localhost:9528

  3. Change the project folder name

  4. Modifying project Information

    Configuration package. Json

  5. Changing the port Number

    Configure the vue. Config. Js

  6. Modify the title of the browser address bar

    Configure the SRC/Settings. Js

  7. Modify the browser address bar icon

    Overwrite the public/favicon.ico file by naming it favicon.ico

  8. Set internationalization: Chinese

    Configure the SRC/main. Js

  9. Modify the login page

    Configure the SRC/views/login/index. Vue

  10. Modify the title of the home page

    Configure the SRC/router/index. Js

  11. Modify the user drop-down list on the home page

    Configure the SRC/layout/components/Navbar. Vue

  12. Modify the breadcrumb root TAB on the home page

    Configuration of the SRC/components/Breadcrumb/index. Vue

  13. Configure the left navigation bar on the home page

    See Route Configuration. When a route is constructed, the route is automatically constructed in the left navigation bar of the home page based on the route information.

Configuration syntax check

1. ESLint is introduced

JavaScript is a dynamic, weakly typed language that is prone to error in development. Because there is no compiler, finding JavaScript code errors often requires constant tuning during execution.

ESLint is a syntactic rule and code style checker that can be used to ensure that syntactic and consistent code is written. It allows programmers to find problems while coding rather than during execution.

2. ESLint syntax rules

ESLint has some rules built in, and you can also customize rules during use.

The syntax rules for this item include:

  • Two character indent, must use single quotation marks, cannot use double quotation marks
  • Statements cannot be followed by semicolons
  • There must be a blank line between code segments

3. Install the ESLint plugin

  1. Installing a plug-in

  2. Enable ESLint verification

    Click ESLint — > Allow Everywhere in the lower right corner

  3. Enable automatic recovery

    Click on gear in the lower left corner – > Settings – > Extensions – > ESLint – > Edit in Settings. json

    As of version 2.0.4, the ESLint extension removed the autoFixOnSave configuration item. Because saving autofix is part of vscode’s Code Action on Save, it needs to be configured in the editor.codeActionsOnSave configuration item.

Configure custom components

1. Create a custom component

  1. Create a custom component directory in the SRC /views directory (project name is recommended)

  2. Create a custom component subdirectory in the SRC /views/ Afterlives directory (module name is recommended)

  3. In the SRC/views/afterlives/user directory to create custom components

2. Customize the component structure

Configure the routing

  1. Enter the SRC/router/index. Js

  2. Route configuration location

    { path: The '*'.redirect: '/ 404'.hidden: true }
Copy the code

    Must be placed last to indicate that 404 is jumped if no route matches.

  3. Build routing

    1. If the parent component’s path is ‘/user’, the child component’s path is ‘list’. Then only ‘/user/list’ can access the child component.
    2. Redirect: ‘/user/list’ indicates the parent component’s path: ‘/user’ redirects to ‘/user/list’ by default when requested.
    3. The name of any component cannot be repeated.
    4. Hidden: True indicates that the child component is not displayed in the left navigation, but can be linked to the page.
    5. Import (‘ @ / views/afterlives/user/List ‘) introducing component, don’t need to add the component file suffix “. Vue “.

The configuration API

1. Configure background apis

  1. Edit env. Development

  2. Configure proxy in vue.config.js

    proxy: {
    [process.env.VUE_APP_BASE_API]: {
        target: process.env.VUE_APP_BASE_API,
        changeOrigin: true.// Configure cross-domain
        pathRewrite: {[A '^' + process.env.VUE_APP_BASE_API]: ' '}}}Copy the code

  3. Change the open property to false in vue.config.js

  4. Comment out the mock.js injection in vue.config.js

  5. Add –open to the package.json startup command

  6. Annotate the mock in main.js to generate data

2. Create API

  1. Create a directory in the SRC/API directory (module name is recommended)

  2. Create an API collection in the SRC/API /user directory (entity names are recommended)

  3. API Content Configuration

3. Call the API

The configuration icon

1. Obtain the icon

Copy all SVG icon files from the SRC/ICONS/SVG path of the vue-element-admin project to the SRC/ICONS/SVG path of this project.

2. Customize import ICONS

  1. Go to SRC/ICONS/SVG to see what ICONS the current project has

  2. Introduce ICONS where components are needed

    Icon -class=”link” Directly sets the name of the icon file.

3. The icon is displayed in the navigation bar

Enter SRC /router/index.js to modify the icon attribute of the route

Icon: ‘link’ File name of the icon directly configured.