富文本編輯器 npm 地址

image

<br />

echarts ecahrts 地址

// 導(dǎo)入 echarts 數(shù)據(jù)可視化
let echarts = require('echarts')

// 看官網(wǎng)文檔查看詳細的使用步驟

<br />

合并兩個對象的方法（lodash）lodash 地址：

// 先導(dǎo)入lodash 這個第三方的庫文件   合并兩個對象
import _  from 'lodash' 

const result = _.merge(res.data, this.options)

<br />

nprogress 進度條 nprogress 進度條 地址

// 先安裝 nprogress 進度條
npm install --save nprogress

// 在main.js中寫如下代碼

// 導(dǎo)入 nprogress 進度條
// 導(dǎo)入 NProgress 包對應(yīng)的JS和CSS
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// axios 請求攔截器   添加請求頭 Authorization 字段 才能訪問有權(quán)限的接口
axios.interceptors.request.use(config => {
  // 在發(fā)起請求時展示進度條
  NProgress.start();

  // console.log(config)  下面是配置請求頭的參數(shù) 當(dāng)有token值時才能訪問一些api接口
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 在最后必須 return config
  return config
})

// 在 response 攔截器中，隱藏進度條 NProgress.done()
axios.interceptors.response.use(config => {
  NProgress.done();

  // 在最后必須 return config
  return config
})

<br />

babel-plugin-transform-remove-console 去除vue項目中的 console 的命令

// 先安裝 transform-remove-console
npm install babel-plugin-transform-remove-console --save-dev

// 在 babel.config.js 文件中輸入

// 這是項目發(fā)布階段需要用到的 babel 插件
const prodPlugins = []
// 判斷開發(fā)模式  是發(fā)布階段就移除 console 的命令
if (process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}

module.exports = {
  // 刪除項目中所有的 console 的輸出
  "plugins": [
      // 發(fā)布產(chǎn)品時候的插件數(shù)組  ... 是展開符 讓 prodPlugins 里面的數(shù)據(jù)項依次展開
      ...prodPlugins
  ]

}

<br />

vue 項目運行 及 打包

// 運行 vue 項目
npm run serve

// 打包 vue 項目
npm run build

// npm run build 運行完成后會生成一個打包好的 dist 文件夾

<br />

vue 項目生成打包報告

image

<br />

vue 項目生成 兩個main.js 文件 一個為開發(fā)模式，一個為發(fā)布模式

image

image

// 現(xiàn)將 main.js 修改為 main-dev.js  并且 復(fù)制 main.js 里面的代碼 再新建一個 main-prod.js 文件

// 在 vue.config.js 文件里面 添加如下代碼
module.exports = {
    devServer: {
        port: 8888,
        open: true
    },
    chainWebpack: config => {
        // 發(fā)布模式
        config.when(process.env.NODE_ENV === 'production', config => {
            config
                .entry('app')
                .clear()
                .add('./src/main-prod.js')
        })
        
        // 開發(fā)模式
        config.when(process.env.NODE_ENV === 'development', config => {
            config
                .entry('app')
                .clear()
                .add('./src/main-dev.js')
        })
    }
}