富文本编辑器 npm 地址
image
<br />
echarts ecahrts 地址
// 导入 echarts 数据可视化
let echarts = require('echarts')
// 看官网文档查看详细的使用步骤
<br />
合并两个对象的方法（lodash）lodash 地址：
// 先导入lodash 这个第三方的库文件 合并两个对象
import _ from 'lodash'
const result = _.merge(res.data, this.options)
<br />
nprogress 进度条 nprogress 进度条 地址
// 先安装 nprogress 进度条
npm install --save nprogress
// 在main.js中写如下代码
// 导入 nprogress 进度条
// 导入 NProgress 包对应的JS和CSS
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
// axios 请求拦截器 添加请求头 Authorization 字段 才能访问有权限的接口
axios.interceptors.request.use(config => {
// 在发起请求时展示进度条
NProgress.start();
// console.log(config) 下面是配置请求头的参数 当有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 文件中输入
// 这是项目发布阶段需要用到的 babel 插件
const prodPlugins = []
// 判断开发模式 是发布阶段就移除 console 的命令
if (process.env.NODE_ENV === 'production') {
prodPlugins.push('transform-remove-console')
}
module.exports = {
// 删除项目中所有的 console 的输出
"plugins": [
// 发布产品时候的插件数组 ... 是展开符 让 prodPlugins 里面的数据项依次展开
...prodPlugins
]
}
<br />
vue 项目运行 及 打包
// 运行 vue 项目
npm run serve
// 打包 vue 项目
npm run build
// npm run build 运行完成后会生成一个打包好的 dist 文件夹
<br />
vue 项目生成打包报告
image
<br />
vue 项目生成 两个main.js 文件 一个为开发模式，一个为发布模式
image
image
// 现将 main.js 修改为 main-dev.js 并且 复制 main.js 里面的代码 再新建一个 main-prod.js 文件
// 在 vue.config.js 文件里面 添加如下代码
module.exports = {
devServer: {
port: 8888,
open: true
},
chainWebpack: config => {
// 发布模式
config.when(process.env.NODE_ENV === 'production', config => {
config
.entry('app')
.clear()
.add('./src/main-prod.js')
})
// 开发模式
config.when(process.env.NODE_ENV === 'development', config => {
config
.entry('app')
.clear()
.add('./src/main-dev.js')
})
}
}
