process 对象是一个全局变量，提供了有关当前 Node.js 进程的信息并对其进行控制。 process.env 属性会返回包含用户环境的对象。 本文介绍如何配置使用process.env环境变量。 原理 采用nodejs顶层对象中process基础类下process.env属性，返回包含用户环境的对象。根据各个环境的配置文件区分和控制。 node环境变量 node环境变量指nodejs执行环境的环境变量。 此处的nodejs指的是webpack的编译环境。 通过npm script中的set属性设置 //package.json "scripts": { "dev": "set NODE_ENV=develop && set PORT=8085 && webpack-dev-server --inline --progress --config build/webpack.dev.conf.js ", "build": "node build/build.js" }, 在webpack编译过程中获取 //webpack.dev.conf.js ....
许多现代 JavaScript 框架和库的核心概念是能够将数据和 UI 封装在模块化、可重用的组件中。这对于开发人员可以在开发整个应用程序时避免使用编写大量重复的代码。虽然这样做非常有用，但也涉及到组件之间的数据通讯。在 Vue 中同样有这样的概念存在。通过前面一段时间的学习，Vue 组件数据通讯常常会有父子组件，兄弟组件之间的数据通讯。也就是说在 Vue 中组件通讯有一定的原则。 父子组件通讯原则 为了提高组件的独立性与重用性，父组件会通过** props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 **$emit 事件告诉父组件。如此确保每个组件都是独立在相对隔离的环境中运行，可以大幅提高组件的维护性。 ** 539 x 447 在《Vue 组件通讯》一文中有详细介绍过这部分。但这套通讯原则对于兄弟组件之间的数据通讯就有一定的诟病。当然，在 Vue 中有其他的方式来处理兄弟组件之间的数据通讯，比如 Vuex 这样的库。但在很多情况之下，咱们的应用程序不需要类似 Vuex 这样的库来处理组件之间的数据通讯，而可以考虑 Vue 中的 事件总线 ，即 **EventB....
Webpack 的第一次发布是在 2013 年发布，长久以来是主流的前端打包工具。Vite 的第一次发布是在 2021 年，是近两年来前端打包工具中的后起之秀，重点解决 Webpack 在开发阶段的开发痛点。截止 2022.6，Webpack 的 Github Star 数 61.2k，Vite 的 Github Star 数是 42.7k。虽然 Vite 刚刚发布 2 年，但是热度可见一斑。 vite和webpack的区别 Webpack Webpack 是一个基于打包器的构建工具，同一个入口文件的代码会打包成一个 Bundle 文件。Webpack 长期来的一个痛点是对于大规模应用的应用启动和热更新速度很慢。 当文件发生变动时，整个 JavaScript Bundle 文件会被 Webpack 重新构建，这也是为什么使用 Webpack 的大规模应用在应用启动和热更新时速度很慢的原因。这给进行大规模 JavaScript 应用的开发者造成了很差的开发体验。 Webpack 如何工作？ Webpack 打包过程： 从一个入口文件开始，基于代码文件中的所有 import，export，....
在router配置 url组成的角度来分析： scheme：协议 （例如http、https） authority(user/information/host/prot)一般会忽略 path：获取资源的路径就是在router中我们在route中需要的path const route = [ { path: '/Home', component: Home } ] query：查询参数 在router-link中需要配置的参数（只能是对象） <router-link :to="{path: "'/Home/'+id", query: { weiget: 140, height: 1.8 }">首页<router-link> fragidl: 一般也忽略 PS:注意query必须是对象类型，因为包含多个查询参数。
在一个组件上绑定多个路由的话点击跳转不管是mouted()和created()都不会执行，从而无法更新跳转后页面的信息。 解决方法：使用监听 watch:{ $route:{ handler:'resetData', } }, methods:{ resetData(){ console.log(this.$route.params) } } 这样可以监听到路由变换获取到url的参数，如果是像点击本页刷新的话可以使用在url上添加时间戳的等方式实现，过程较复杂没有实践
1、如何使用 router-link对象方式传递参数？ 在 vue-router中，有两大对象被挂载到了实例 this； $route（只读、具备信息的对象）； $router（具备功能的函数） 查询字符串： 去哪里 ？ <router-link :to="{name:'detail',query:{id:1}}"> xxx </router-link> 导航（查询字符串path不用改） {name:'detail',path:'/detail',组件} 去了干嘛？获取路由参数（要注意是 query ，还是 params 和 对应的 id名? 是后者需要注意设置相关文件的id规则） + this.$route.query.id path方式： 去哪里 ？ <router-link :to="{name:'detail',params:{name:1}}"> xxx </router-link> 导航（查询字符串path不用改）{name:'detail',path:'/detail/:name',组件} 去了干嘛？获取路由参数（要注意......
'rules': { "comma-dangle": ["error", "never"], //是否允许对象中出现结尾逗号 "no-cond-assign": 2, //条件语句的条件中不允许出现赋值运算符 "no-console": 2, //不允许出现console语句 "no-constant-condition": 2, //条件语句的条件中不允许出现恒定不变的量 "no-control-regex": 2, //正则表达式中不允许出现控制字符 "no-debugger": 2, //不允许出现debugger语句 "no-dupe-args": 2, //函数定义的时候不允许出现重复的参数 "no-dupe-keys": 2, //对象中不允许出现重复的键 "no-duplicate-case": 2, //switch语句中不允许出现重复的case标签 "no-empty": 2, //不允许出现空的代码块 "no-empty-character-class": 2, //正则表达式中不允许出现空的字符组 "no-ex-assign": 2, //在try catch语句....
问题描述： 项目中使用debugger/console报错 error Unexpected ‘debugger’ statement no-debugger error Unexpected ‘debugger’ statement no-debugger 解决办法： 找到项目中的 package.json 文件 找到 eslintConfig 配置参数 在 eslintConfig 下的 rules 添加 “no-debugger”: “off”, “no-console”: “off”, 重启项目 "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "parserOptions": { "parser": "babel-eslint" }, "rules": { "no-debugger":"off", "no-console":"off" } },
解决vue项目中的“Invalid Host header” 解决方法： 1、在vue-cli版本为2.x的情况下修改 webpack.dev.conf.js中的devServer对象加入disableHostCheck: true即可 devServer: { disableHostCheck: true, } 2、vue-cli版本3.0的情况下修改 vue.config.js的配置 module.exports = { devServer: { disableHostCheck:true } }
记录下Vue全家桶框架中内置方法 vue 原文地址 components 加载组建 使用方法： 倒入的方法加载作用 directives 做权限按钮的功能 这个没用过不清楚 filters 过滤器 它下面的方法可以在标签中使用 并且支持管道形式的传值： filters: { statusFilter(status) { const statusMap = { published: 'success', draft: 'info', deleted: 'danger' } return statusMap[status] } } <el-tag :type="row.status | statusFilter"> {{ row.status }} </el-tag> data() 数据 存放当前vue页面数据的方法 created() 进入页面加载 这里面的方法和事件在进入页面时会加载一次 methods 普通方法 存放普通方法的函数 computed 计算属性 计算属性具有缓存。计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新......
