本文介绍vue-cli脚手架build目录中check-versions.js的配置 本文件是用来检测node和npm版本的 直接上代码加注释 // 下面的插件是chalk插件,他的作用是在控制台中输出不同的颜色的字,大致这样用chalk.blue('Hello world'),这款插件只能改变命令行中的字体颜色 var chalk = require('chalk') // 下面这个是semver插件,是用来对特定的版本号做判断的,比如 // semver.gt('1.2.3','9.8.7'…
在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.spec.js 单元测试用例当中,关于 icon 默认的 order 的测试用例无法进行测试,因为它涉及到了样式.前面已经提到由于它处于虚拟内存之中.因此只要进行单元测试,就会出现以下报错. // 样式相关的测试用例 it('icon 默认的 order 是 1', () => { const wra…
本文系统讲解vue-cli脚手架build目录中的karma.conf.js配置文件 这个配置文件是命令 npm run unit 的入口配置文件,主要用于单元测试 这条命令的内容如下 "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run" 这条命令中的 cross-env 是跨平台设置环境变量,你在命令行中设置环境变量加上这句话就是了 karma start test/unit/karma…
Vue CLI  的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置是通过 webpack-chain (链式操作)维护的.这个库提供了一个 webpack 原始配置的上层抽象,使其可以定义具名的 loader 规则和具名插件,并有机会在后期进入这些规则并对它们的选项进行修改. 它允许我们更细粒度的控制其内部配置.接下来有一个在 vue.config.js 中的 c…
前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 test-单测)模式.其实这是小伙伴们没有理解 vueCli 文档所导致的. vueCli 命令中 --mode 对应的 .env.[mode],而不是 NODE_ENV ::: tip 注意 除了 VUE_APP_ 变量之外. 还有两个特殊的变量: NODE_ENV: 是 development.pro…
const path = require('path') const utils = require('./utils')// 引入utils工具模块,具体查看我的博客关于utils的解释,utils主要用来处理css-loader和vue-style-loader的 const config = require('../config')// 引入config目录下的index.js配置文件,主要用来定义一些开发和生产环境的属性 const vueLoaderConfig = require('…
common/post.js import axios from 'axios' // 引入axios import qs from 'qs' // 引入qs axios.defaults.baseURL = '/apis' //请求地址的域名(此处使用了代理所以直接填/apis // 拦截响应response,进行错误处理 axios.interceptors.response.use(function (response) { // 成功处理 // code处理 response.code…
vue-cli 的webpack中已配置了less,但 package.json 中没有选项,为了方便开发中使用,需安装一下: 安装方式一: npm install less less-loader --save-dev 安装less和less-loader,并记录到devDependencies中,因为这是我们在开发中使用的而非在生产中使用 安装方式二: 或直接在 package.json 的 devDependencies 中 "less": "^3.0.1",…
css的预编译: 使用步骤: 第一步:用npm下三个loader(sass-loader.css-loader.node-sass): 第二步:在build目录找到webpack.base.config.js,在那个extends属性中加一个拓展.scss: 第三步:还是在同一个文件,配置一个module属性: 第四步:然后在组件的style标签加上lang属性,例如:lang="scss": 有哪几大特性: 1.可以用变量,例如($变量名称=值): 2.可以用混合器: 3.可以嵌套:…
第一种方法:(感觉这个有问题) 1.把需要的js放到static文件夹下 2.在Index.html页面引入 3.在webpack.base.conf.js添加下面代码 externals: { 'WdatePicker': 'WdatePicker' }, 4.vue组件里面引入 import WdatePicker from 'WdatePicker' 之后就可以正常使用js了 第二种方法: 1.把需要的js放到static文件夹下 2.组件里面直接引入 (也感觉有问题)…