1. 项目相关
1.1.vue CLI 配置 vue.config.JS
文档传送门
Vue Cli 全局配置文件系统用户根目录下的. vuerc, 项目配置文件是根目录下的 vue.config.JS.
vue.config.JS 是可选的, 若有则会被 @vue/cli-service 自动加载.
常用配置项有 publicPath,pages,chainwebpack,configureWebpack,devServer.
- module.exports = {
- publicPath: process.env.NODE_ENV === 'production'
- ? '/production-sub-path/'
- : '/',
- devServer:{
- compress: true,
- clientLogLevel: 'none',
- headers: {
- "X-Custom-Foo": "bar"
- },
- before: function(App, server) {
- App.get('/some/path', function(req, res) {
- res.JSON({ custom: 'response' });
- });
- },
- proxy: {
- '/article/api': {
- target: 'http://article.xxx.com',
- changeOrigin: true,
- pathRewrite: function (path, req) { return path.replace('/article/api', '') }
- },
- '/api': {
- target: 'http://origin.yyy.com',
- changeOrigin: true
- }
- }
- }
- }
所有 webpack-dev-server 的选项 vue-cli 都支持.
devServer.headers(object)
为所有的请求添加 headers
- headers: {
- "X-Custom-Foo": "bar"
- }
- devServer.compress(boolean 类型)
对所有请求启用 gzip 压缩
- compress: true
- devServer.proxy(object)
开发环境代理服务, 将匹配到的 url 请求转发到真正的域名上去.
target 置换请求域名, pathRewrite 可修改请求的路径.
- proxy: {
- '/article/api': {
- target: 'http://article.xxx.com',
- changeOrigin: true,
- pathRewrite: function (path, req) { return path.replace('/article/api', '') }
- },
- '/api': {
- target: 'http://origin.yyy.com',
- changeOrigin: true
- },
- }
- devServer.before(function (App, server))
在所有其他中间件执行之前执行的中间件, 可用于定义自定义处理程序.
比如拦截请求返回 mock 数据.
- before: function(App, server) {
- App.get('/some/path', function(req, res) {
- res.JSON({ custom: 'response' });
- });
- }
- 1.2. gulp
gulp 是基于流的自动化构建工具.
浏览 gulp 的官方 API 文档 https://www.gulpjs.com.cn/docs/api/ .
gulp.src(globs[, options])
流的源, 读文件, 可以根据匹配到的文件产生数据流, 数据流可以通过管道 (pipe) 进入别的插件中.
globs 的常用写法有:
```JavaScript
JS/App.JS: 指定确切的文件名.
JS/*.JS: 某个目录所有后缀名为 JS 的文件.
JS/**/*.JS: 某个目录及其所有子目录中的所有后缀名为 JS 的文件.
!JS/App.JS: 除了 JS/App.JS 以外的所有文件.
*.+(JS CSS): 匹配项目根目录下, 所有后缀名为 JS 或 CSS 的文件.
['js/**/*.js', '!js/**/*.min.js'] : 数组指定多个成员
options 可选参数有 options.buffer,options.read,options.base.
gulp.dest(path[, options])
流的汇, 写文件, 将从 pipe 管道里流进来的数据流输出到文件.
path 写文件的路径.
options 可选参数有 options.cwd,options.mode.
gulp.task(name[, deps], fn)
定义一个任务.
name : String 任务名
deps: Array 任务前置依赖, gulp4 后的版本不再支持用 deps 指定前置依赖的任务, 改用 gulp.series(按照顺序执行)和 gulp.paralle(可以并行计算).
fn : function 任务要执行的操作, 要使它支持异步, 需要:
* 接受一个 callback, 并在任务末尾执行它
* 返回一个数据流, 形如:`gulp.src().pipe(someplugin())`
* 返回一个 promise
在使用的时候发现一个问题, 同一个任务, 调用一个 callback 比返回一个数据流快 10 多倍.
gulp.watch()
监听文件, 文件发生变动则运行指定操作, 返回一个 watcher 对象.
操作的指定方式:
tast 任务
gulp.watch('templates/*.tmpl.html', ['build']);
回调函数
- gulp.watch('templates/*.tmpl.html', function (event) {
- console.log('Event type:' + event.type);
- });
事件触发
- var watcher = gulp.watch('templates/*.tmpl.html', ['build']);
- watcher.on('change', function (event) {
- console.log('Event type:' + event.type);
- });
可以触发的事件有:
change : 文件改变时触发.
end: 回调函数运行完毕时触发.
error: 发生错误时触发.
ready: 当开始监听文件时触发.
nomatch: 没有匹配的监听文件时触发
watcher 对象的方法有:
watcher.on() :
watcher.end(): 停止 watcher 对象, 不会再调用任务或回调函数.
watcher.files(): 返回 watcher 对象监视的文件.
watcher.add(glob): 增加所要监视的文件, 它还可以附件第二个参数, 表示回调函数.
watcher.remove(filepath): 从 watcher 对象中移走一个监视的文件.
- const stateMap = ["未使用","已使用","禁用"]
- this.tableData = res.data.items.map( item => ({
- ...item,state:stateMap[item.state]
- }) );
来源: https://www.cnblogs.com/mthz/p/week5.html