此文章用来解释vue-cli脚手架build目录中的utils.js配置文件1.此配置文件是vue开发环境的wepack相关配置文件，主要用来处理css-loader和vue-style-loader2.关于注释 ?当涉及到较复杂的解释我将通过标识的方式(如（1）)将解释写到单独的注释模块，请自行查看 3.上代码// 引入nodejs路径模块 var path = require(path) // 引入config目录下的index.js配置文件 var config = require(../config) // 引入extract-text-webpack-plugin插...
大家还记得我们在老版本中，对于线上环境配置中会把所有的 css 多打成一个文件： 核心是使用了插件 extract-text-webpack-plugin，方式如下： 第一步都是加载插件 const ExtractTextPlugin = require(extract-text-webpack-plugin)这个插件的描述如下：Extract text from a bundle, or bundles, into a separate file.然后配置如下：（省去了 rules 相关的配置） 一般配置 filename 来保证最终生成的 css 文件名 plugins: [new Ext...
1.场景 在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。 2.遇到的问题 1. 用vue-router重新路由到当前页面，页面是不进行刷新的 2.采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好 3.解决方法 provide / inject 组合 作用：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。 我的项目配置： ①...
如下所示： <!--导航菜单-折叠功能--> <aside :class="collapsed?‘menu-collapsed‘:‘menu-expanded‘"> <!--单个激活 并以 index 作为 path 进行路由跳转--> <el-menu unique-opened router v-show="!collapsed"> <!--动态路由到子组件 将不可见的路径隐藏--> <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden"> <el-submenu :index="index+‘‘" v-if="!item.leaf"> <!--用el ui 的title进行solt...
这次给大家带来vue-cli3.0配置详解，使用vue-cli3.0配置的注意事项有哪些，下面就是实战案例，一起来看一下。新建项目 # 安装 npm install -g @vue/cli # 新建项目 vue create my-project # 项目启动 npm run serve # 打包 npm run build打包后的文件，对引用资源注入了预加载（preload/prefetch），启用 PWA 插件时注入 manifest/icon 链接，并且引入(inlines) webpack runtime / chunk manifest 清单已获得最佳性能。 功能配置 功...
在vue文件里配置所需的全局变量，然后通过export暴露出去。 如 Global.vue <script type="text/javascript">const serverPath="http://127.0.0.1:8080";export default{serverPath} </script> 在main.js引入，将global接口放到prototype，这样以后其他组件引用global里的全局变量就可以直接通过“this.global.变量”的方式而无需import多次 import global from ./GlobalVue.prototype.global=global 以上这篇Vue文件配置全局变量的...
Sass语言 Sass是一种强大的css扩展语言（css本身并不是一门语言），它允许你使用变量、嵌套规则、mixins、导入等css没有但开发语言（如Java、C#、Ruby等）有的一些特性，并且完全兼容CSS语法。Sass有助于保持大型样式表结构良好。 Sass有两种语法。 一种称为SCSS，是一个CSS3语法的扩充版本，也就是说，所有符合CSS3语法的样式表也都是具有相同语法意义的SCSS文件，SCSS样式表文件要以.scss扩展名结尾。在vue中，...
1，关闭eslint 这里只说vue-cli脚手架的关闭方法，其实很简单，就是把 build/webpack.base.conf.js 配置文件中的eslint rules注释掉即可。 module: {rules: [// {// test: /\.(js|vue)$/,// loader: eslint-loader,// enforce: pre,// include: [resolve(src), resolve(test)],// options: {// formatter: require(eslint-friendly-formatter)// }// },...]...}2，修改eslint的语法检测，文件为根目录下的 .eslintrc.js文件...
在用vue或react等工具搭建一个移动端项目时,怎样做到自适应呢? 当然选择rem布局比较方便快捷.开发移动端，我们常常要用到rem+flex，那么vue中如何配置呢，我的做法是这样： 1、在js中统一计算配置代码如下： export default function() {// var devicePixelRatio = 1;// var scale = 1 / devicePixelRatio;// document.querySelector(meta[name="viewport"]).setAttribute(content,initial-scale= + scale + , maximum-scale= + sc...
执行 npm run build 之后的 dist 目录的静态资源的文件名多会追加上 hash 值，比如: page1.f151b4d3.js 那如果不要 hash 呢，你只需要配置 vue.config.js 文件中的 filenameHashing 官方文档也提到了因为 html 也是我们通过插件生成的，静态资源直接就 inject 进去的，所以，当 html 不是自动生成或者其他情况时候，就不能加 hash 了，可以配置 false。 filenameHashing: false我们看看源码实现： 首先它是 vue.config.js 的一个配...
好长一段时间没有关注vue脚手架了，昨天因为需要个后台模板，用脚手架搞了一下，竟然发现指令不能用了，看官方文档已经升级3.0，也是试的玩了一下，大致写写怎么玩的！ 1.先全局安装vue-cli3.0 检测安装：vue -V 2.创建项目（这个就跟react创建脚手架项目比较像了） 这里如果你是第一次用3.0版本的话，是没有前两个的，而只有最后两个，这里是让你选的，第一个是默认配置，一般选第二个，自己配置，这里选择最后一个 在选择功能后...
什么是webpack webpack是一个module bundler（模块打包工具），所谓的模块就是在平时的前端开发中，用到一些静态资源，如JavaScript、CSS、图片等文件，webpack就将这些静态资源文件称之为模块 webpack支持AMD和CommonJS，以及其他的一些模块系统，并且兼容多种JS书写规范，可以处理模块间的以来关系，所以具有更强大的JS模块化的功能，它能对静态资源进行统一的管理以及打包发布，在官网中用这张图片介绍：它在很多地方都能替代Gr...
本文介绍了如何配置vue-cli3.0的vue.config.js，分享给大家，具体如下： vue-cli 3 英文文档 vue-cli 3 中文文档 webpack 4 plugins webpack-chain TLDR vue-cli 3 与 2 版本有很大区别 vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下vue-cli 3 的项目架构完全抛弃了 vue-cli 2 的原有架构，3 的设计更加抽象和简洁（此处后续可以详细介绍）vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3vue-...
第1步：安装cross-env npm i --save-dev cross-env 第2步：修改各环境下的参数 在config/目录下添加test.env.js、pre.env.js。 修改prod.env.js里的内容，修改后的内容如下： use strict module.exports = {NODE_ENV: "production",EVN_CONFIG:"prod",API_ROOT:"/apis/v1" } 分别对test.env.js和pre.env.js文件内容进修修改，修改后的内容如下： use strict module.exports = {NODE_ENV: "testing",EVN_CONFIG:"test",API_ROOT:"/...
传统方法 以前在单页面路由中，就只能在html文件中定一个固定的网站的title。如果想要动态的去修改，需要使用如下的方法。 document.title = '这是一个标题'; 这样会让我们做很多无用功。显得十分蠢。 使用Vue-Router的方法 首先打开/src/router/index.js文件。 找到如下代码。 const vueRouter = new Router({routes,mode: history,linkActiveClass: active-link,linkExactActiveClass: exact-active-link,scrollBehavior (to, fr...