Some NPM packages you use in your projects

Sass use

NPM I node-sass [email protected] --save-devCopy the code

Because the current version of Sass is too high, webpack compiled with an error, so specify: NPM install [email protected] –save-dev to install the lower version.

axios

A particularly handy encapsulation of network requests

npm install axios
Copy the code

Axios-js.com/zh-cn/docs/…

The use of echarts

When diagrams are needed in a project

vue-echarts

npm install echarts vue-echarts
Copy the code

use

const app = createApp(App)
import VueEcharts from 'vue-echarts'
app.component("vue-echarts", VueEcharts)
Copy the code

Ecomfe. Making. IO/vue – echarts…

v-charts

npm i v-charts echarts -S
Copy the code

Using vue2

/ / introduction
import VCharts from 'v-charts' 
import 'v-charts/lib/style.css' 
// Register the plug-in
Vue.use(VCharts)
Copy the code

Vue3 cannot be used because V-Charts is not in maintenance. It is quite convenient to use in VUe2.

Note: Version incompatibilities may occur when you install because it is not being maintained. It is recommended to install the versions of V-Charts and Echart

"Echarts" : "^ 4.9.0", "v - charts" : "^ 1.19.0", "vue" : "^ 2.6.11", "vue - echarts" : "^ 5.0.0 - beta. 0".Copy the code

Woolen. Gitee. IO/v – charts / # /…

Element – plus component library

    npm install element-plus --save
Copy the code

According to the need to load

npm install babel-plugin-import -D
Copy the code

// babel.config.js
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'].plugins: [['import',
      {
        libraryName: 'element-plus'.// Import components
        customName: name= > {
          name = name.slice(3)
          return `element-plus/lib/components/${name}`
        },
        // Introduce styles
        customStyleName: name= > {
          name = name.slice(3)
          // If you need to import the [name].scss file, you need to use the following line
          // return `element-plus/lib/components/${name}/style`
          / / introduction [name]. CSS
          return `element-plus/lib/components/${name}/style/css`},},],],}Copy the code

use

import 'element-plus/dist/index.css'
import {ElButton} from 'element-plus'

const app = createApp(App)
app.use(ElButton)
Copy the code

Element – plus. Gitee. IO / # / useful – CN/com…

Moment Time formatting

Very convenient for an event formatting JS library

npm install moment --save 
Copy the code

Returns the difference between the incoming time and the present time.

Locale.locale ('zh-cn') moment(timestamp).startof ('hour').fromnow ()Copy the code

Load the request progress bar

When data is requested, a loading progress bar appears at the head of the window, enhancing the user experience

npm install --save nprogress
Copy the code

Introduces the loading progress bar style

// Introduce the loadbar style
import 'nprogress/nprogress.css'
import 'element-plus/lib/theme-chalk/index.css';
Copy the code

Encapsulated request methods

import axios from 'axios'
import NProgress from 'nprogress'

function request (config) {
  const instance = axios.create({
    baseURL: 'http://127.0.0.1:7001'.timeout: 5000
  })
  // Add the loading bar style
  // Axios requests interceptors
  instance.interceptors.request.use(
    req= > {
      NProgress.start() // Set the loading progress bar (start..)
      return req
    },
    error= > {
      return Promise.reject(error)
    }
  )
  // Axios responds to the interceptor
  instance.interceptors.response.use(
    function (res) {
      NProgress.done() // Set the loading progress bar (end..)
      if (res.data.status === 200) {
        return res.data.data
      } else {
        return "Request error"}},function (error) {
      return Promise.reject(error)
    }
  )

  return instance(config)
}

export default request

Copy the code

Github.com/rstacruz/np…

Mitt User-defined event

npm install --save mitt
Copy the code

Because vue3 removes custom event-related apis. So it’s very convenient to use mitt.

import mitt from 'mitt'

const emitter = mitt()

// Send events

emitter.emit("String event name"And parameters)// Define events
emitter.on('String event name', callback function)Copy the code

Github.com/developit/m…

Marked converts markdown to HTML

npm install marked
Copy the code

Yes, it provides many ancillary functions that are useful for editing articles when developing a personal blog site.

marked(markedText);
Copy the code

Marked.js.org/using_advan…

Highlight.js highlights code snippets

npm install highlight.js
Copy the code

Use: combined with marked to highlight code snippets.

highlightjs.org/usage/

Vditor is a very useful rich text editor

npm install vditor
Copy the code

Github.com/Vanessa219/…