Package.json 属性说明
- name - 包名。
- version - 包的版本号。
- description - 包的描述。
- homepage - 包的官网 url 。
- author - 包的作者姓名。
- contributors - 包的其他贡献者姓名。
- devDependencies - 开发环境依赖包。
- dependencies - 生产/开发环境依赖包。列表。如果依赖包没有安装，npm 会自动将依赖包安装在 node_module 目录下。
- repository - 包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上。
- main - main 字段指定了程序的主入口文件，require('moduleName') 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js。
- keywords - 关键字
package-lock.json
package-lock.json 是在 npm install 时候生成的一份文件，用以记录当前状态下实际安装的各个 npm package 的具体来源和版本号。package-lock.json 文件的作用锁定安装时的包的版本号，并且需要上传到 git，以保证其他人在 npm install 时大家的依赖能保证一致。
Vue.use()
> 安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。
install 方法调用时，会将 Vue 作为参数传入。什么意思呢？
`Vue.use()` 中的参数必须是一个`function`函数或者是一个`Object`对象，
如果是对象的话，必须在对象中提供一个`install`方法。
之后会将 `Vue` 作为参数传入。我们分两点来看：
1.如果`Vue.use()` 中的参数是一个`function`函数，那么函数的参数是`Vue`对象。
2.如果`Vue.use()` 中的参数是一个`Object`对象，那么这个对象必须提供一个`install`方法，
`install`方法的参数就是`Vue`。
下面介绍一些包使用方法
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node --max_old_space_size=2048 build/build.js",
"buildNoSourceMap": "node --max_old_space_size=2048 build/build.js noSource",
"buildAll": "concurrently \"node build/build.js\" \"node build/build.js noSource\""
}
"dependencies":{
"vue-bus": "^1.2.1",
"nprogress": "^0.2.0",
}
"devDependencies":{
"concurrently": "^8.0.1",
"vconsole": "^3.8.1",
}
下载指定版本，能有打包同时，打出来dist.zip与distRelease.zip包
方法一 vue init webpack xxx 创建项目
config/index.js concurrently插件使用
"use strict";
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require("path");
let ifSourceMap;
// console.log("ifSourceMap11",process.argv.splice(2)[0] == 'noSource')
// console.log("ifSourceMap额外参数",process.argv)
const proxyList = [
"http://192.168.1.140:312/"
];
let proxyUrl = proxyList[0];
if (process.argv.splice(2)[0] == "noSource") {
ifSourceMap = false;
} else {
ifSourceMap = true;
}
module.exports = {
dev: {
// Paths
assetsSubDirectory: "static",
assetsPublicPath: "/",
proxyTable: {
"*": {
changeOrigin: true,
target: proxyUrl,
secure: false
},
"/file": {
changeOrigin: true,
target: proxyUrl,
secure: false
},
"/DreamMobile/*": {
changeOrigin: true,
target: proxyUrl,
secure: false
},
"/DreamWeb/*": {
changeOrigin: true,
target: proxyUrl,
secure: false
}
},
// Various Dev Server settings
host: "localhost", // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: "cheap-module-eval-source-map",
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
build: {
// Template for index.html
index: path.resolve(
__dirname,
ifSourceMap ? "../dist/index.html" : "../distRelease/index.html"
),
// Paths
assetsRoot: path.resolve(
__dirname,
ifSourceMap ? "../dist" : "../distRelease"
),
assetsSubDirectory: "static",
assetsPublicPath: "/",
/**
* Source Maps
*/
productionSourceMap: ifSourceMap,
// https://webpack.js.org/configuration/devtool/#production
devtool: "#source-map",
// devtool: "eval-cheap-module-source-map",
// webpack5走下面
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: !ifSourceMap,
productionGzipExtensions: ["js", "css"],
//压缩DistZip文件
productionDistZip: true,
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
};
代理服务器
proxyTable: {
// 这里配置 '/api' 就等价于 target , 你在链接里访问 /api === http://localhost:端口号
'/api': {
target: 'http://localhost:端口号',//源地址
secure: true, // 是否为 https ,
changeOrigin: true, // 是否是跨域请求 ,改变源地址
}
}
vue-bus插件使用
main.js中
import VueBus from "vue-bus";
Vue.use(VueBus)
//通用事件总线组件
import eventBus from "./common/eventBus";
Vue.use(eventBus);
eventBus.js
const eventBus = {
refresh(vm, obj) { //刷新首页或者列表数据
dsf.noRefreshTitle = false
if (obj&&obj.noRefreshTitle) {
dsf.noRefreshTitle = true//如果是保存 就只刷新数据不刷新标题，否则就需要及刷新数据也刷新标题
}
vm.$bus.emit("refresh", obj);
},
onRefresh(vm, fn) { //首页或者列表数据接收
vm.$bus.on("refresh", (data) => {
if (fn) fn(data)
});
},
Off(vm, offName) {
vm.$bus.off(offName);
},
}
export default function (Vue) {
//添加全局API
Vue.prototype.$eventBus = eventBus
}
原生事件总线
//创建vm
new Vue({
el:'#app',
render: h => h(App),
// beforeCreate中模板未解析，且this是vm
beforeCreate(){
Vue.prototype.$bus = this //安装全局事件总线
}
})
B.vue
this.$bus.$on('自定义事件名', (接收参数)=>{ console.log('我是TestB组件，收到了数据', 接收参数); })
A.vue
触发事件方法名(){ this.$bus.$emit('自定义事件名', 传递参数); }
// 销毁对应自定义事件
beforeDestroy(){ this.$bus.$off('lufei') }
vconsole插件
import VConsole from "vconsole";
var vConsole;
if (window.location.href.indexOf("isdebug=1") > -1) {
vConsole = new VConsole();
}
nprogress
main.js
import NProgress from "nprogress";
import "nprogress/nprogress.css";
router.beforeEach((to, from, next) => {
NProgress.start();
})
router.afterEach((to, from) => {
NProgress.done();
})
修改进度条的样式
#nprogress .bar {
@include background-theme('normal', true);
height: 5px !important;
}
/* Fancy blur effect */
#nprogress .peg {
@include bar-box-shadow('normal', true);
@include border-alpha-theme(1px, solid, 'normal', 0.4, true)
}
#nprogress .spinner-icon {
@include border-top-theme('normal', true);
@include border-left-theme('normal', true);
}
