### Getting Started with vue-element-admin Development

Source: https://panjiachen.github.io/vue-element-admin-site/index

Instructions to clone the vue-element-admin project, install its dependencies using npm, and start the local development server.

```Bash
# clone the project
git clone https://github.com/PanJiaChen/vue-element-admin.git

# install dependency
npm install

# develop
npm run dev

```

--------------------------------

### Getting Started with Vue Element Admin Development

Source: https://panjiachen.github.io/vue-element-admin-site/guide

Provides a sequence of shell commands to clone the Vue Element Admin repository, navigate into the project directory, install dependencies, and start the development server.

```Shell
# clone the project
git clone https://github.com/PanJiaChen/vue-element-admin.git

# enter the project directory
cd vue-element-admin

# install dependency
npm install

# develop
npm run dev
```

--------------------------------

### Install lint-staged Development Dependency

Source: https://panjiachen.github.io/vue-element-admin-site/es/guide/advanced/git-hook

Command to install `lint-staged` as a development dependency using npm, which is essential for setting up pre-commit hooks in a project.

```Shell
npm install lint-staged -D -S
```

--------------------------------

### Install Husky npm package

Source: https://panjiachen.github.io/vue-element-admin-site/es/guide/advanced/git-hook

Command to install the husky package as a development dependency using npm. This enables Git hooks to be configured for pre-commit checks.

```bash
npm install husky -D -S
```

--------------------------------

### JavaScript File Naming Convention (kebab-case)

Source: https://panjiachen.github.io/vue-element-admin-site/guide/advanced/style-guide

Illustrates the kebab-case naming convention for all .js files within the project. This ensures consistency across utility and helper scripts.

```File Path
@/utils/open-window.js
@/views/svg-icons/require-icons.js
@/components/MarkdownEditor/default-options.js
```

--------------------------------

### PostCSS Autoprefixer Configuration with Browserslist

Source: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/style

Illustrates the configuration of Autoprefixer within 'postcss.config.js' and its integration with the 'browserslist' array defined in 'package.json' for managing browser compatibility.

```JavaScript
// postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {}
  }
}
```

```JSON
"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
```

--------------------------------

### Install element-theme global CLI

Source: https://panjiachen.github.io/vue-element-admin-site/guide/advanced/theme

Installs the `element-theme` command-line interface globally using npm, enabling access to theme generation and compilation tools from any directory.

```npm
npm i element-theme -g
```

--------------------------------

### Example API Service Folder Structure

Source: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/server

Illustrates the recommended directory structure for organizing API service files within the src/api folder, typically split by model or feature.

```text
api/
  login.js
  article.js
  remoteSearch.js
...
```

--------------------------------

### Install Husky for Git Hooks

Source: https://panjiachen.github.io/vue-element-admin-site/guide/advanced/git-hook

Installs the `husky` npm package as a development dependency. Husky allows developers to easily configure Git hooks, such as `pre-commit`, to automate tasks before code is committed.

```Shell
npm install husky -D -S
```

--------------------------------

### Example Columns Configuration for Tree-Table

Source: https://panjiachen.github.io/vue-element-admin-site/feature/component/tree-table

Provides a JavaScript array example for the `columns` prop, detailing properties like `label`, `key`, `checkbox`, `expand`, `width`, and `alignment` for table columns.

```JavaScript
const columns = [
  {
    label: 'Checkbox',
    checkbox: true
  },
  {
    label: '',
    key: 'id',
    expand: true
  },
  {
    label: 'Event',
    key: 'event',
    width: 200,
    align: 'left'
  },
  {
    label: 'Scope',
    key: 'scope'
  }
]
```

--------------------------------

### Install project dependencies with npm

Source: https://panjiachen.github.io/vue-element-admin-site/guide/advanced/theme

Executes `npm install` within the project directory to set up all required local dependencies for the theme customization project.

```npm
npm install
```

--------------------------------

### Upgrade Node Sass to Dart Sass via npm

Source: https://panjiachen.github.io/vue-element-admin-site/guide/advanced/sass

This snippet provides the two essential npm commands to transition from `node-sass` to `dart-sass`. It involves uninstalling the old package and installing the new `sass` package as a development dependency, streamlining the migration process.

```Shell
npm uninstall node-sass

npm install sass -S -D
```

--------------------------------

### Vue Router Example Configuration for Permission Route

Source: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav

An example of a Vue Router configuration for a permission-controlled route, demonstrating the use of `path`, `component`, `redirect`, `hidden`, `alwaysShow`, and `meta` properties, including nested children routes and role-based access control.

```JavaScript
{
  path: '/permission',
  component: Layout,
  redirect: '/permission/index',
  hidden: true,
  alwaysShow: true,
  meta: { roles: ['admin','editor'] }, // you can set roles in root nav
  children: [{
    path: 'index',
    component: _import('permission/index'),
    name: 'permission',
    meta: {
      title: 'permission',
      icon: 'lock',
      roles: ['admin','editor'], // or you can only set roles in sub nav
      noCache: true
    }
  }]
}
```

--------------------------------

### Install project dependencies

Source: https://panjiachen.github.io/vue-element-admin-site/es/guide/advanced/theme

Navigate into the project directory (e.g., `custom-element-theme`) and install its required Node.js dependencies using npm.

```Shell
npm install
```

--------------------------------

### Upgrade Node Sass to Dart Sass using npm

Source: https://panjiachen.github.io/vue-element-admin-site/es/guide/advanced/sass

This snippet provides the npm commands to uninstall 'node-sass' and install 'sass' (Dart Sass) as a development dependency, simplifying the project's build process and aligning with modern Sass practices.

```bash
npm uninstall node-sass

npm install sass -S -D
```

--------------------------------

### Example Git commit to trigger pre-commit hook

Source: https://panjiachen.github.io/vue-element-admin-site/es/guide/advanced/git-hook

A standard Git commit command used to demonstrate how the configured pre-commit hook (via husky) will be triggered and enforce linting rules before the commit is completed.

```bash
git commit -m "Keep calm and commit"
```

--------------------------------

### Example: Export Data to Excel with Specific Headers

Source: https://panjiachen.github.io/vue-element-admin-site/feature/component/excel

This JavaScript example demonstrates a complete usage of 'export_json_to_excel', showing how to define custom headers and pass existing data (e.g., 'this.list') for export. It provides a practical illustration of the export process.

```javascript
import('@/vendor/Export2Excel').then(excel => {
  const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
  const data = this.list
  excel.export_json_to_excel({
    header: tHeader, //Header Required
    data, //Specific data Required
    filename: 'excel-list', //Optional
    autoWidth: true, //Optional
    bookType: 'xlsx' //Optional
  })
})
```

--------------------------------

### Example Git commit triggering pre-commit hook

Source: https://panjiachen.github.io/vue-element-admin-site/guide/advanced/git-hook

A standard Git commit command. When executed, this command will trigger any configured `pre-commit` hooks, such as the ESLint check defined using Husky.

```Shell
git commit -m "Keep calm and commit"
```

--------------------------------

### Build Vue.js Application for Production and Stage

Source: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy

Execute npm scripts to compile the Vue.js application for production and staging environments. This process generates a `dist` folder containing all static assets like JavaScript, CSS, and HTML files.

```bash
npm run build:prod

npm run build:stage
```

--------------------------------

### Install lint-staged for selective linting

Source: https://panjiachen.github.io/vue-element-admin-site/guide/advanced/git-hook

Installs the `lint-staged` npm package as a development dependency. `lint-staged` is used in conjunction with Git hooks to run linters only on files that are currently staged for commit, improving performance.

```Shell
npm install lint-staged -D -S
```

--------------------------------

### Install element-theme globally

Source: https://panjiachen.github.io/vue-element-admin-site/es/guide/advanced/theme

Install the `element-theme` command-line tool globally using npm. This tool is essential for generating and compiling theme variables.

```Shell
npm i element-theme -g
```

--------------------------------

### Vue Component File Naming Convention (PascalCase)

Source: https://panjiachen.github.io/vue-element-admin-site/guide/advanced/style-guide

Demonstrates the recommended PascalCase naming convention for Vue component files, with the exception of index.vue. This convention helps distinguish components from other file types.

```File Path
@/components/BackToTop/index.vue
@/components/Charts/Line.vue
@/views/example/components/Button.vue
```

--------------------------------

### Install vue-count-to dependency using npm

Source: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/import

This command installs the `vue-count-to` package from npm and saves it as a dependency in the project's `package.json` file.

```bash
$ npm install vue-count-to --save
```

--------------------------------

### Analyze Vue.js Build File Size with Webpack Bundle Analyzer

Source: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy

Run a command to generate a report on the size distribution of modules within your Vue.js build. This uses `webpack-bundle-analyzer` to help identify large dependencies and optimize application size.

```bash
npm run preview -- --report
```

--------------------------------

### Install Dependencies for Excel Export/Import

Source: https://panjiachen.github.io/vue-element-admin-site/feature/component/excel

This snippet shows the npm commands required to install the necessary packages ('xlsx', 'file-saver', 'script-loader') for Excel export and import functionalities. 'js-xlsx' is a core dependency, while 'file-saver' handles file saving and 'script-loader' assists with lazy loading.

```bash
npm install xlsx file-saver -S
npm install script-loader -S -D
```

--------------------------------

### Vue View File Naming Convention (kebab-case)

Source: https://panjiachen.github.io/vue-element-admin-site/guide/advanced/style-guide

Shows the kebab-case naming convention for .vue files and folders under the views directory. This aligns with route URLs and helps distinguish view files from standard components.

```File Path
@/views/svg-icons/index.vue
@/views/svg-icons/require-icons.js
```

--------------------------------

### Sass /deep/ to ::v-deep Syntax Migration

Source: https://panjiachen.github.io/vue-element-admin-site/guide/advanced/sass

This code example illustrates the necessary syntax change for scoped styles in Sass when migrating to Dart Sass. It shows how to replace the deprecated `/deep/` combinator with the `::v-deep` combinator, which is compatible with Vue's scoped CSS and aligns with future Vue specifications.

```Sass
.a {
  /deep/ {
    .b {
      color: red;
    }
  }
}

/* change into */
.a {
  ::v-deep {
    .b {
      color: red;
    }
  }
}
```

--------------------------------

### Declare API Function for Fetching Roles

Source: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/mock-api

This JavaScript snippet shows the declaration of the `getRoles` API function, which uses the `request` utility to make a GET request to the `/roles` endpoint. This API is used as an example to demonstrate how to remove its corresponding mock configuration.

```JavaScript
export function getRoles() {
  return request({
    url: '/roles',
    method: 'get'
  })
}
```

--------------------------------

### Vue Element Admin Global Styles Directory Structure

Source: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/style

Outlines the standard directory structure for global styles within a Vue Element Admin project, detailing common SCSS files used for buttons, Element-UI overrides, general styles, mixins, sidebar, transitions, and variables.

```text
├── styles
│   ├── btn.scss                 # button css
│   ├── element-ui.scss          # global custom element-ui style
│   ├── index.scss               # global common style
│   ├── mixin.scss               # global sass mixin
│   ├── sidebar.scss             # sidebar css
│   ├── transition.scss          # vue transition animation
│   └── variables.scss           # global variables
```

--------------------------------

### Mock Data Configuration for Get Roles API

Source: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/mock-api

This JavaScript object literal represents the mock configuration for the `getRoles` API, specifying its URL, HTTP method, and a response function that returns mock role data. This snippet is provided as an example of a mock route that would be removed to switch to real backend data.

```JavaScript
{
    url: '/roles',
    type: 'get',
    response: _ => {
      return {
        code: 20000,
        data: roles
      }
    }
  }
```

--------------------------------

### Example Data Structure for Tree-Table Component

Source: https://panjiachen.github.io/vue-element-admin-site/feature/component/tree-table

Defines the expected JavaScript array structure for the `data` prop, demonstrating how to represent hierarchical relationships using a `children` array.

```JavaScript
const data = [
  {
    name: "1",
    children: [
      {
        name: "1-1"
      },
      {
        name: "1-2"
      }
    ]
  },
  {
    name: "2"
  }
]
```

--------------------------------

### Generate new Vue component/view using plop

Source: https://panjiachen.github.io/vue-element-admin-site/feature/script/new

Executes the plop-based template generator to create new Vue components or views. This command automates the setup of basic file structures like <template>, <script>, and <style>, reducing manual boilerplate work.

```Shell
npm run new
```

--------------------------------

### Vue Component Style Block Usage

Source: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/style

Demonstrates the use of both global and locally-scoped style blocks within a Vue single-file component. Styles within `<style>` tags are global, while those in `<style scoped>` are limited to the component.

```HTML
<style>
/* global styles */
</style>

<style scoped>
/* local styles */
</style>
```

--------------------------------

### Configuring PostCSS Plugins and Browser Compatibility

Source: https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/style

This example demonstrates how to configure PostCSS plugins, specifically autoprefixer, using postcss.config.js. vue-loader automatically reads this file for PostCSS settings. It also illustrates how autoprefixer leverages the browserslist configuration in package.json to define target browser compatibility, ensuring consistent CSS prefixes across the project.

```javascript
// postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {}
  }
}
```

```json
"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
```

--------------------------------

### Example Vue CLI Environment Variables in .env File

Source: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/env

Shows a basic .env file with key-value pairs, emphasizing the VUE_APP_ prefix required for variables exposed to the client-side application.

```plaintext
FOO=bar
VUE_APP_SECRET=secret
```

--------------------------------

### JavaScript Tree Table Data Structure Example

Source: https://panjiachen.github.io/vue-element-admin-site/zh/feature/component/tree-table

Defines the required `data` structure for the `tree-table` component, showing how to represent hierarchical data with nested `children` arrays.

```JavaScript
const data = [
  {
    name:'1'
    children: [
      {
        name: '1-1'
      },
      {
        name: '1-2'
      }
    ]
  },
  {
    name: `2`
  }
]
```

--------------------------------

### Vue.js Scoped CSS Deep Selectors and Compiled Output

Source: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/style

Demonstrates how to use the '>>>' (or '/deep/') combinator in Vue.js scoped styles to target elements within child components, and illustrates the resulting compiled CSS.

```Vue/CSS
<style scoped>
.a >>> .b { /* ... */ }
</style>
```

```CSS
.a[data-v-f3f3eg9] .b {
  /* ... */
}
```

```Vue/CSS
.xxx-container >>> .el-button{
  xxxx
}
```

--------------------------------

### Fix ESLint Errors Automatically via npm

Source: https://panjiachen.github.io/vue-element-admin-site/guide/advanced/eslint

Execute this command in your project's terminal to run the lint script with the `--fix` option, enabling ESLint to automatically correct simple code style and quality issues.

```Shell
npm run lint -- --fix
```

--------------------------------

### Override Element-UI Component Styles with Namespace

Source: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/style

Shows a method to override Element-UI component styles (e.g., `el-tag`) specifically for a particular page or component. This is achieved by nesting the Element-UI selector within a custom parent class, creating a localized namespace.

```CSS
.article-page {
  /* you namespace*/
  .el-tag {
    /* element-ui element tag*/
    margin-right: 0px;
  }
}
```

--------------------------------

### Merge locale messages for async language loading

Source: https://panjiachen.github.io/vue-element-admin-site/es/guide/advanced/i18n

Demonstrates how to asynchronously load and merge locale messages for specific pages or components using vue-i18n's mergeLocaleMessage method. This approach helps optimize bundle size by loading translations only when needed.

```JavaScript
import local from './local'

this.$i18n.mergeLocaleMessage('en', local.en)
this.$i18n.mergeLocaleMessage('zh', local.zh)
```

--------------------------------

### JavaScript Tree Table Columns Definition Example

Source: https://panjiachen.github.io/vue-element-admin-site/zh/feature/component/tree-table

Defines the required `columns` array for the `tree-table` component, specifying properties like `label`, `key`, `expand`, `checkbox`, `width`, and `align` for each column.

```JavaScript
const columns = [
  {
    label: 'Checkbox',
    checkbox: true
  },
  {
    label: '',
    key: 'id',
    expand: true
  },
  {
    label: 'Event',
    key: 'event',
    width: 200,
    align: 'left'
  },
  {
    label: 'Scope',
    key: 'scope'
  }
]
```

--------------------------------

### Import ThemePicker Component in Vue.js

Source: https://panjiachen.github.io/vue-element-admin-site/es/guide/advanced/theme

Provides a simple example of importing the `ThemePicker` component into a Vue.js project. This component facilitates the dynamic theme switching functionality provided by the application.

```javascript
import ThemePicker from '@/components/ThemePicker'
```

--------------------------------

### Vue template and data initialization with i18n labels

Source: https://panjiachen.github.io/vue-element-admin-site/es/guide/advanced/i18n

Illustrates how to use the $t function within a Vue template's v-for loop for dynamic options in an Element UI select component. It also shows the corresponding JavaScript data initialization where labels are set using $t.

```HTML
<el-select v-model="value">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"/>
</el-select>
```

```JavaScript
this.options = [
  {
    value: '1',
    label: this.$t('i18nView.one')
  },
  {
    value: '2',
    label: this.$t('i18nView.two')
  },
  {
    value: '3',
    label: this.$t('i18nView.three')
  }
]
```

--------------------------------

### Configure Public Path for Vue.js Deployment

Source: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy

Adjust the `publicPath` setting in your Vue.js configuration file (e.g., `@/config/index.js`) to ensure correct resource loading paths after deployment. This is crucial when static assets are served from a different base URL or CDN.

```javascript
// changes configure depending on your own path
publicPath: './'
```

--------------------------------

### Vue CLI 4: Manual Configuration for Synchronous Imports

Source: https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading

For Vue CLI 4 projects, the recommended approach is to manually install `babel-plugin-dynamic-import-node` as a development dependency. This provides more control and avoids fragility associated with relying on internal Vue CLI environment variables. The plugin is then directly configured in `babel.config.js` to ensure dynamic imports are converted to synchronous `require()` calls during development.

```shell
npm install babel-plugin-dynamic-import-node -S -D
```

```javascript
module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  env: {
    development: {
      plugins: ['dynamic-import-node']
    }
  }
}
```

--------------------------------

### Configure Vue Router History Mode

Source: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy

This JavaScript snippet demonstrates how to modify the `vue-router` configuration to enable 'history' mode. Enabling this mode removes the '#' from URLs, providing cleaner paths, but it necessitates backend server support to handle direct URL access.

```javascript
export default new Router({
  // mode: 'history' // Need backend support
})
```

--------------------------------

### Vue Scoped CSS Compilation Example

Source: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/style

Illustrates how Vue's `scoped` attribute transforms CSS selectors during compilation to ensure styles are applied only to the current component, preventing global style pollution. It shows the original CSS and its compiled form with a unique attribute.

```CSS
/* Compile before */
.example {
  color: red;
}

/* Compile after */
.example[_v-f3f3eg9] {
  color: red;
}
```

--------------------------------

### VSCode Settings for ESLint Auto-Fix and Validation

Source: https://panjiachen.github.io/vue-element-admin-site/guide/advanced/eslint

This JSON configuration snippet provides settings for Visual Studio Code to integrate with the ESLint extension. It enables ESLint validation for various file types (JavaScript, React, Vue HTML, Vue), sets ESLint to run on save, and activates auto-fixing of linting issues upon saving files.

```JSON
{
  "files.autoSave": "off",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue-html",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.run": "onSave",
  "eslint.autoFixOnSave": true
}
```

--------------------------------

### Configure webpack-dev-server Proxy and Mock Server Middleware

Source: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/mock-api

This snippet shows how to configure `devServer.proxy` in `vue.config.js` to redirect API requests to a local mock server and how to include the `mock-server.js` as an `after` middleware. This setup allows the mock server to intercept requests before they are proxied.

```JavaScript
proxy: {
  // change xxx-api/login => mock/login
  // detail: https://cli.vuejs.org/config/#devserver-proxy
  [process.env.VUE_APP_BASE_API]: {
    target: `http://localhost:${port}/mock`,
    changeOrigin: true,
    pathRewrite: {
      ['^' + process.env.VUE_APP_BASE_API]: ''
    }
  }
},
after: require('./mock/mock-server.js')
```

--------------------------------

### Dynamically Fetch Element-UI Theme CSS via XMLHttpRequest (JavaScript)

Source: https://panjiachen.github.io/vue-element-admin-site/guide/advanced/theme

Illustrates the JavaScript code used to dynamically fetch the Element-UI theme CSS file from a CDN based on the installed `element-ui` version. It uses `XMLHttpRequest` to retrieve the CSS string, removes `@font-face` rules, and stores the content for later manipulation to achieve dynamic theme switching.

```JavaScript
const version = require('element-ui/package.json').version

const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
this.getCSSString(url, chalkHandler, 'chalk')

getCSSString(url, callback, variable) {
  const xhr = new XMLHttpRequest()
  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4 && xhr.status === 200) {
      this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
      callback()
    }
  }
  xhr.open('GET', url)
  xhr.send()
}
```

--------------------------------

### Vue.js: Basic Markdown Editor Component Usage

Source: https://panjiachen.github.io/vue-element-admin-site/feature/component/markdown-editor

This example demonstrates how to integrate the `MarkdownEditor` component into a Vue.js application. It shows the component being imported and used within a template, with its content bound to a `data` property named `content` using `v-model` for two-way data binding.

```vue
<template>
  <markdown-editor v-model="content" />
</template>
<script>
import MarkdownEditor from '@/components/MarkdownEditor'

export default {

  data() {
    return {
      content: '',
    }
  }
}
</script>

```

--------------------------------

### Migrate Sass /deep/ to ::v-deep syntax in Vue

Source: https://panjiachen.github.io/vue-element-admin-site/es/guide/advanced/sass

This example demonstrates the required syntax change for scoped CSS in Vue.js when migrating from 'node-sass' to 'dart-sass'. The old '/deep/' combinator is replaced with '::v-deep' for compatibility and adherence to modern Vue and CSS standards, as '/deep/' is deprecated.

```scss
.a {
  /deep/ {
    .b {
      color: red;
    }
  }
}

/* change into */
.a {
  ::v-deep {
    .b {
      color: red;
    }
  }
}
```

--------------------------------

### Modify ESLint Configuration Extends in Vue.js

Source: https://panjiachen.github.io/vue-element-admin-site/guide/advanced/eslint

This JavaScript snippet demonstrates how to adjust the "extends" property in the ".eslintrc.js" file. It shows how to switch between different ESLint rule sets, such as "plugin:vue/recommended" and "plugin:vue/essential", to control the strictness of linting for Vue.js code.

```JavaScript
module.exports = {
  extends: ['plugin:vue/recommended', 'eslint:recommended']
  //You can change it to  extends: ['plugin:vue/essential', 'eslint:recommended']
}
```

--------------------------------

### Using checkPermission Global Function for Conditional Rendering

Source: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/permission

This example illustrates how to use a global `checkPermission` utility function with `v-if` for conditional rendering, especially in scenarios where a directive like `v-permission` is not suitable (e.g., with certain component types like `el-tab-pane`). It includes importing the function and making it available in component methods.

```Vue
<template>
  <el-tab-pane v-if="checkPermission(['admin'])" label="Admin">Admin can see this</el-tab-pane>
  <el-tab-pane v-if="checkPermission(['editor'])" label="Editor">Editor can see this</el-tab-pane>
  <el-tab-pane v-if="checkPermission(['admin','editor'])" label="Admin-OR-Editor">Both admin or editor can see this</el-tab-pane>
</template>

<script>
import checkPermission from '@/utils/permission'

export default{
   methods: {
    checkPermission
   }
}
</script>
```

--------------------------------

### Clone custom-element-theme repository

Source: https://panjiachen.github.io/vue-element-admin-site/guide/advanced/theme

Downloads the `custom-element-theme` project from GitHub using Git, which serves as a base for theme customization.

```git
git@github.com:PanJiaChen/custom-element-theme.git
```

--------------------------------

### Configure Husky pre-commit hook with ESLint

Source: https://panjiachen.github.io/vue-element-admin-site/guide/advanced/git-hook

Adds a `husky` configuration to `package.json`. This sets up a `pre-commit` hook that executes `eslint --ext .js,.vue src` to lint JavaScript and Vue files in the `src` directory before a commit is finalized.

```JSON
"husky": {
    "hooks": {
      "pre-commit": "eslint --ext .js,.vue src"
    }
  }
```

--------------------------------

### Analyze Webpack Bundle Size Report

Source: https://panjiachen.github.io/vue-element-admin-site/guide/advanced/cdn

This shell command executes a webpack build in preview mode and generates a detailed report of the static resource sizes. It is useful for identifying large third-party dependencies that might be candidates for CDN offloading or further optimization.

```Shell
npm run preview -- --report
```

--------------------------------

### Basic Tree-Table Component Integration

Source: https://panjiachen.github.io/vue-element-admin-site/feature/component/tree-table

Illustrates the fundamental usage of the Tree-Table component, showing how to bind `data` and `columns` props and enable borders.

```Vue
<tree-table :data="data" :columns="columns" border>
```

--------------------------------

### Configure Husky pre-commit hook in package.json

Source: https://panjiachen.github.io/vue-element-admin-site/es/guide/advanced/git-hook

JSON configuration to be added to `package.json` under the 'husky' field. This sets up a 'pre-commit' hook that executes ESLint on all .js and .vue files within the 'src' directory before a commit is finalized.

```json
"husky": {
    "hooks": {
      "pre-commit": "eslint --ext .js,.vue src"
    }
  }
```

--------------------------------

### JavaScript: Default Options for TUI.Editor Initialization

Source: https://panjiachen.github.io/vue-element-admin-site/feature/component/markdown-editor

This JavaScript object defines the standard configuration parameters used to initialize the TUI.Editor instance within the Markdown Editor component. It specifies visual settings like `minHeight` and `previewStyle`, functional aspects such as `useCommandShortcut` and `useDefaultHTMLSanitizer`, and a comprehensive list of `toolbarItems` available to the user.

```javascript
const defaultOptions = {
  minHeight: '200px',
  previewStyle: 'vertical',
  useCommandShortcut: true,
  useDefaultHTMLSanitizer: true,
  usageStatistics: false,
  hideModeSwitch: false,
  toolbarItems: [
    'heading',
    'bold',
    'italic',
    'strike',
    'divider',
    'hr',
    'quote',
    'divider',
    'ul',
    'ol',
    'task',
    'indent',
    'outdent',
    'divider',
    'table',
    'image',
    'link',
    'divider',
    'code',
    'codeblock'
  ]
}

```

--------------------------------

### HTML Template for Dynamic CDN Resource Injection

Source: https://panjiachen.github.io/vue-element-admin-site/guide/advanced/cdn

This HTML template code, intended for `public/index.html`, demonstrates how to dynamically inject CSS and JavaScript CDN links. It uses EJS-like syntax (`<% %>`) to iterate over the `cdn` object provided by `html-webpack-plugin`, ensuring correct loading of external resources.

```HTML
<head>
  <!-- inject css-->
  <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
    <link rel="stylesheet" href="<%=css%>">
  <% } %>
</head>

<!-- inject js -->
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%=js%>"></script>
<% } %>
```

--------------------------------

### Overriding Base URL Directly in an Axios Request

Source: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/server

Provides an example of how to directly specify or override the baseURL property within an individual Axios request configuration, allowing for dynamic endpoint targeting.

```JavaScript
export function fetchList(query) {
  return request({
    url: '/article/list',
    method: 'get',
    params: query,
    baseURL: 'xxxx' // direct coverage
  })
}
```

--------------------------------

### Configure Husky and lint-staged in package.json

Source: https://panjiachen.github.io/vue-element-admin-site/es/guide/advanced/git-hook

JSON configuration for `package.json` to define a `pre-commit` hook using `husky` that executes `lint-staged`. `lint-staged` is configured to run `eslint --fix` on `.js` and `.vue` files in the `src` directory before adding changes to git, ensuring code quality before commit.

```JSON
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix",
      "git add"
    ]
  }
```

--------------------------------

### Manually Importing SASS Mixins in Vue.js Components

Source: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/style

Shows the method for manually importing a SASS mixin file into a Vue.js component's style block when global mixin injection is not automatically configured.

```Vue/SCSS
<style rel="stylesheet/scss" lang="scss">
  @import "src/styles/mixin.scss";
</style>
```

--------------------------------

### Vue Element Admin Project Directory Structure

Source: https://panjiachen.github.io/vue-element-admin-site/guide

Illustrates the hierarchical organization of files and directories within the Vue Element Admin project, providing a clear overview of where different components, configurations, and assets are located.

```Filesystem
├── build                      # build config files
├── mock                       # mock data
├── plop-templates             # basic template
├── public                     # pure static assets (directly copied)
│   │── favicon.ico            # favicon
│   └── index.html             # index.html template
├── src                        # main source code
│   ├── api                    # api service
│   ├── assets                 # module assets like fonts,images (processed by webpack)
│   ├── components             # global components
│   ├── directive              # global directive
│   ├── filters                # global filter
│   ├── icons                  # svg icons
│   ├── lang                   # i18n language
│   ├── layout                 # global layout
│   ├── router                 # router
│   ├── store                  # store
│   ├── styles                 # global css
│   ├── utils                  # global utils
│   ├── vendor                 # vendor
│   ├── views                  # views
│   ├── App.vue                # main app component
│   ├── main.js                # app entry file
│   └── permission.js          # permission authentication
├── tests                      # tests
├── .env.xxx                   # env variable configuration
├── .eslintrc.js               # eslint config
├── .babelrc                   # babel config
├── .travis.yml                # automated CI configuration
├── vue.config.js              # vue-cli config
├── postcss.config.js          # postcss config
└── package.json               # package.json
```

--------------------------------

### Create Axios Instance with Dynamic `baseURL`

Source: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/mock-api

This JavaScript snippet demonstrates how to create an Axios instance with a dynamically set `baseURL`. The `baseURL` is retrieved from `process.env.BASE_API`, which allows the application to automatically switch between local and online APIs based on environment variables. A `timeout` of 5000ms is also configured.

```JavaScript
// create an axios instance
const service = axios.create({
  baseURL: process.env.BASE_API, // base_url of the API
  timeout: 5000 // request timeout
})
```

--------------------------------

### Configuring Multiple Axios Instances with Distinct Base URLs

Source: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/server

Illustrates the creation of separate Axios instances (service, service2), each configured with a unique baseURL derived from environment variables and a common timeout, enabling requests to different API endpoints.

```JavaScript
// create an axios instance
const service = axios.create({
  baseURL: process.env.BASE_API, // api base_url
  timeout: 5000 // request timeout
})

const service2 = axios.create({
  baseURL: process.env.BASE_API2, // api base_url
  timeout: 5000 // request timeout
})
```

--------------------------------

### Initial Plan: Configure Babel for Synchronous Imports in Development

Source: https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading

This section outlines the original approach to enable synchronous loading of dynamic imports during development. It involves setting a `BABEL_ENV` variable in `package.json` to define the development environment. Subsequently, `.babelrc` is configured to apply `babel-plugin-dynamic-import-node` specifically when this environment variable is active, converting `import()` to `require()`.

```json
"dev": "cross-env BABEL_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
```

```json
{
  "env": {
    "development": {
      "plugins": ["dynamic-import-node"]
    }
  }
}
```

--------------------------------

### Access Environment Variables in Vue.js Application

Source: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy

Demonstrates how to retrieve custom environment variables within your Vue.js application code. These variables are defined in `.env.xxxx` files and must be prefixed with `VUE_APP_` to be accessible via `process.env`.

```javascript
console.log(process.env.VUE_APP_xxxx)
```

--------------------------------

### APIDOC: Markdown Editor Component Props

Source: https://panjiachen.github.io/vue-element-admin-site/feature/component/markdown-editor

This section outlines the properties (props) available for configuring the Markdown Editor component. Each prop is detailed with its `Name`, `Type`, `Default` value, and a `Description` explaining its purpose and usage, including special notes for `v-model` integration.

```APIDOC
Props:
- value:
  Type: String
  Default: " "
  Description: This prop can change content of the editor. If you using `v-model`, don't use it.
- options:
  Type: Object
  Default: following `defaultOptions`
  Description: Options of tui.editor. This is for initailize tui.editor.
- height:
  Type: String
  Default: '300px'
  Description: This prop can control the height of the editor.
- mode:
  Type: String
  Default: 'markdown'
  Description: This prop can change mode of the editor. (`markdown`or `wysiwyg`)
- language:
  Type: String
  Default: 'en_US'
  Description: i18n
```

--------------------------------

### Enable Pure Front-End Mocking with `mockXHR`

Source: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/mock-api

This snippet demonstrates how to enable pure front-end mock data using the `mockXHR` function. It imports `mockXHR` from a local mock file and then calls it to activate client-side data simulation, mimicking the behavior of `v4.0` and earlier versions.

```JavaScript
import { mockXHR } from '../mock'
mockXHR()
```

--------------------------------

### Vue.js Dynamic Component Loading for Production Environment

Source: https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading

This configuration implements asynchronous component loading using dynamic `import()` for the production environment. This optimizes the initial bundle size and page load times by loading components only when their corresponding routes are accessed.

```javascript
module.exports = file => () => import('@/views/' + file + '.vue')
```

--------------------------------

### Locally register and use vue-count-to component in Vue.js SFC

Source: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/import

This Vue.js Single File Component (SFC) example illustrates how to locally import and register the `vue-count-to` component within a specific component. It defines data properties for `startVal` and `endVal` and uses them in the template.

```vue
<template>
  <countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
</template>

<script>
import countTo from 'vue-count-to';
export default {
  components: { countTo },
  data () {
    return {
      startVal: 0,
      endVal: 2017
    }
  }
}
</script>
```

--------------------------------

### Defining Multiple API Base URLs via Environment Variables

Source: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/server

Shows how to declare multiple base API URLs (VUE_APP_BASE_API, VUE_APP_BASE_API2) in a .env.development file, making them accessible within the application for different API services.

```Shell
# .env.development
VUE_APP_BASE_API = '/dev-api' #Inject the root path of the api
VUE_APP_BASE_API2 = '/dev-api2' #Inject the root path of the api
```

--------------------------------

### Clone custom-element-theme repository

Source: https://panjiachen.github.io/vue-element-admin-site/es/guide/advanced/theme

First step to customize themes is to download the `custom-element-theme` repository, which provides a modified version of the official theme generation library.

```Shell
git@github.com:PanJiaChen/custom-element-theme.git
```

--------------------------------

### Dynamically update i18n options on language change

Source: https://panjiachen.github.io/vue-element-admin-site/es/guide/advanced/i18n

Provides a solution for reactively updating component options when the application's language changes. It uses a Vue watcher on the 'lang' property to re-evaluate and reset the options array, ensuring labels are always in the current language.

```JavaScript
export default {
  watch: {
    lang() {
      this.setOptions()
    }
  },
  methods: {
    setOptions() {
      this.options = [
        {
          value: '1',
          label: this.$t('i18nView.one')
        },
        {
          value: '2',
          label: this.$t('i18nView.two')
        },
        {
          value: '3',
          label: this.$t('i18nView.three')
        }
      ]
    }
  }
}
```

--------------------------------

### Integrate lint-staged with Husky in package.json

Source: https://panjiachen.github.io/vue-element-admin-site/guide/advanced/git-hook

Modifies `package.json` to integrate `lint-staged` into the `pre-commit` hook. It configures `lint-staged` to run `eslint --fix` and `git add` on staged `.js` and `.vue` files within the `src` directory, automatically fixing and re-adding issues.

```JSON
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix",
      "git add"
    ]
  }
```

--------------------------------

### Vue Router: Basic Page Configuration

Source: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/new-page

Demonstrates adding a new top-level route to '@/router/index.js' for a new page. This configuration includes 'path', 'component', 'redirect', 'name', and 'meta' properties for basic routing and sidebar display.

```JavaScript
{
  path: '/excel',
  component: Layout,
  redirect: '/excel/export-excel',
  name: 'excel',
  meta: {
    title: 'excel',
    icon: 'excel'
  }
}
```

--------------------------------

### Basic Vue.js Lazy Loading Route Component

Source: https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading

Demonstrates the fundamental syntax for lazy loading a Vue component using dynamic `import()`, leveraging Vue's async component feature and webpack's code splitting capabilities.

```javascript
const Foo = () => import('./Foo.vue')
```

--------------------------------

### Run SVGO Optimization Script

Source: https://panjiachen.github.io/vue-element-admin-site/feature/script/svgo

Executes the SVGO optimization script to compress SVG files, removing redundant information and reducing file size. This command is typically run from the project's root directory to process SVG assets.

```Shell
npm run svgo
```

--------------------------------

### Dynamically Update ECharts with Vue Watchers

Source: https://panjiachen.github.io/vue-element-admin-site/guide/advanced/chart

Illustrates how to use Vue's 'watch' property to reactively update ECharts configurations. Two examples are provided: one watching for deep changes in an 'options' object to re-render the chart, and another watching for changes in 'seriesData' to update only the chart's data.

```javascript
// The first watch options change Using the depth of vue watcher, options are re-setOption
watch: {
  options: {
    handler(options) {
      this.chart.setOption(this.options)
    },
    deep: true
  },
}
// The second only watch data changes trigger ECharts only when the data changes
watch: {
  seriesData(val) {
    this.setOptions({series:val})
  }
}
```

--------------------------------

### Vue Router: Page with Single Nested Child Route

Source: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/new-page

Illustrates how to define a parent route with a single child route. This setup will not display an expansion arrow in the sidebar unless 'alwaysShow: true' is explicitly set, as per Vue Element Admin's routing logic.

```JavaScript
{
  path: '/excel',
  component: Layout,
  redirect: '/excel/export-excel',
  name: 'excel',
  meta: {
    title: 'excel',
    icon: 'excel'
  },
  children: [
    {
      path: 'export-excel',
      component: ()=>import('excel/exportExcel'),
      name: 'exportExcel',
      meta: { title: 'exportExcel' }
    }
  ]
}
```

--------------------------------

### Disable ESLint LintOnSave in Vue CLI Project

Source: https://panjiachen.github.io/vue-element-admin-site/guide/advanced/eslint

This JavaScript configuration snippet illustrates how to disable the "lintOnSave" feature in the "vue.config.js" file. Setting "lintOnSave: false" prevents ESLint from running automatically when files are saved, though this is generally not recommended for maintaining code quality.

```JavaScript
// In vue.config.js
module.exports = {
  // ... other configurations
  lintOnSave: false
}
```

--------------------------------

### Vue Tree Table Component Basic Usage

Source: https://panjiachen.github.io/vue-element-admin-site/zh/feature/component/tree-table

Basic usage of the `tree-table` component, demonstrating how to bind `data` and `columns` props and enable borders.

```Vue
<tree-table :data="data" :columns="columns" border>
```

--------------------------------

### Run ESLint Auto-Fix Command

Source: https://panjiachen.github.io/vue-element-admin-site/es/guide/advanced/eslint

Executes the ESLint linter with the '--fix' flag, which automatically corrects simple, fixable errors in the project's codebase. This command helps maintain code style and quality.

```Shell
npm run lint -- --fix

```

--------------------------------

### Tree-Table Component Instance Methods

Source: https://panjiachen.github.io/vue-element-admin-site/feature/component/tree-table

Lists the available methods for programmatic interaction with the Tree-Table component instance, such as `addChild`, `addBrother`, and `delete` for manipulating table rows.

```JavaScript
this.$refs.TreeTable.addChild(row, data) //Add child elements
this.$refs.TreeTable.addBrother(row, data) //Add a sibling element
this.$refs.TreeTable.delete(row) //Delete the element
```

--------------------------------

### Configure default-openeds for El-Menu in Vue

Source: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav

This snippet demonstrates how to use the `:default-openeds` prop on an `<el-menu>` component to expand specific sub-menus by default. The prop expects an array of route paths corresponding to the sub-menus that should be opened, such as `['/example', '/nested']`.

```Vue
 <el-menu
        :default-openeds="['/example','/nested']" // Add this line of code
        :default-active="activeMenu"
        :collapse="isCollapse"
        :background-color="variables.menuBg"
        :text-color="variables.menuText"
        :unique-opened="false"
        :active-text-color="variables.menuActiveText"
        :collapse-transition="false"
        mode="vertical"
      >
        <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
      </el-menu>
```