在 vue.config.js 的文件中加入下面这段话 // vue.config.jsconst Timestamp = new Date().getTime();module.exports = { configureWebpack: { // webpack 配置 output: { // 输出重构 打包编译后的 文件名称 [模块名称.版本号.时间戳] filename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`, ch…

// vue.config.jsconst Timestamp = new Date().getTime();module.exports = { configureWebpack: { // webpack 配置 output: { // 输出重构 打包编译后的 文件名称 [模块名称.版本号.时间戳] filename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`, chunkFilename: `[name].${proce…

module.exports = { // 部署应用时的基本 URL baseUrl: process.env.NODE_ENV === 'production' ? '192.168.60.110:8080' : '192.168.60.110:8080', // build时构建文件的目录 构建时传入 --no-clean 可关闭该行为 outputDir: 'dist', // build时放置生成的静态资源 (js.css.img.fonts) 的 (相对于 outputDir 的) 目…

当你使用vue/cli3.0的时,有可能出现雁阵规则 ESLint: Expected indentation of 2 spaces but found 4. (indent) 解决方法 1.在vue.config.js中 添加     lintOnSave: false,  false不能加引号 然后新建 .eslintignore    在根目录下 添加   然后重新启动 *.vue *.js 参考地址有 https://blog.csdn.net/weixin_44678104/arti…

echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的一个小的echarts demo,我在使用npm的时候对比了echarts和vue-echarts两个依赖,最后决定使用echarts依赖包,因为它更接近原生,使用现实更小,如果对vue生命周期比较了解,那就更容易操作.下面讲一下做出这样一个echarts图. 一 基础的echarts图表制作 1.…

2==解决vue2.0里面控制台包的一些语法错误. https://www.jianshu.com/p/5e0a1541418b 在build==>webpack.base.conf.j下注释掉 ...(config.dev.useEslint ? [createLintingRule()] : []),rules: [ // ...(config.dev.useEslint ? [createLintingRule()] : []), { test: /\.vue$/, loader: "…

1.vue cli3.0需要在项目根目录下配置webpack  包括反向代理以及打包文件路径 const webpack = require("webpack"); module.exports = { //configureWebpack 是Vue CLI3.0 中用于配置 webpack 插件参数的地方,你在这里设置,会新建或者覆盖 webpack 默认配置. //webpack ProvidePlugin 的含义是创建一个全局的变量,使这个变量在 webpack 各个模块内都可以…

vue-cli3.0安装 如果你事先已经全局安装了旧版本的vue-cli(1.x 或 2.x),你需要先卸载它: npm uninstall vue-cli -g 安装 npm install -g @vue/cli // 安装cli3.x vue --version // 查询版本是否为3.x 如果不想用cli3.x,cli3也能使用2.x模板,命令如下: npm install -g @vue/cli-init // 安装这个模块 // 就可以使用2.x的模板:vue init webpac…

一.创建项目初始化 1.初始化项目npm init -y 2.创建 src (用来存放开发环境的代码)文件夹.  config (用来存放webpack的配置项)文件夹 3.安装webpack  Webpack-cli 二.base.config.js文件 config文件夹下创建base.config.js 1.基本配置 constpath=require("path");//定义入口文件路径和出口文件路径constPATH={   app:path.join(__dirname,&…

首先用 vue create创建一个项目 当前的项目目录是这样的: 首先需要创建一个 packages 目录,用来存放组件 然后将 src 目录改为 examples 用作示例 二.修改配置 启动项目的时候,默认入口文件是 src/main.js 将 src 目录改为 examples 之后,就需要重新配置入口文件 在根目录下创建一个 vue.config.js 文件 // vue.config.js module.exports = { // 将 examples 目录添加为新的页面 page…

今天学习时,想访问网易新闻接口,结果显而易见,因为跨域被浏览器拒绝了. 去网上找一下结果一开始找到的是2.x版本的配置,生硬的放进去,给我各种报错.编译阶段就炸了.浪费好多时间 再按3.0版本去搜索才找到答案,这里做一下笔记. 在vue.config.js中(一般新生成的面目中默认是没有的,自己新建)写入如下配置 module.exports = { devServer:{//这里与2.x版本是有区别的,在2.x版本配置中是dev proxy: {//这里与2.x版本是有区别的,在2.x版本配置…

这篇文章主要介绍下vue-cli3.0项目搭建,项目结构和配置等整理一下,分享给大家. 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack 和 webpack-dev-server 之上(提供 如:serve.build …

VUE-cli3使用 svg-sprite-loader svg-sprite-loader 的插件,用来根据导入的 svg 文件自动生成 symbol 标签并插入 html 1.安装依赖 npm install svg-sprite-loader \--save-dev 2.配置vue.config.js文件webpack 配置,在Vue.config.js加入处理 svg 的 loader const path = require('path') function resolve (dir)…

项目经理要求做首页加载优化,打包后从十几兆优化到两兆多,记下来怕下次忘记 运行report脚本 可看到都加载了那些内容,在从dist文件中index.html 查看首次加载都加载了那些东西,如下图:然后首次加载不需要用到的插件可不用在main.js中引入 "dev": "vue-cli-service serve", "pro": "vue-cli-service serve --open --mode production"…

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('…

# 安装 npm install -g @vue/cli # 查看已安装版本vue --version 或者 vue -V # 卸载 npm uninstall @vue/cli -g # 新建项目 vue create my-project # 项目启动 npm run serve # 打包 npm run build 在项目根目录新建文件  vue.config.js  module.exports = {     devServer: {       port: 8080,       …

1.安装Vue CLI 3 //三选一即可cnpm install -g @vue/cli npm install -g @vue/cli yarn global add @vue/cli 注意: 1.如果安装过旧版的VUE CLI需要先卸载掉 //三选一即可 npm uninstall vue-cli -g npm uninstall vue-cli -g yarn global remove vue-cli 2.VUE CLI3需要node.js8.9版本及以上 官方链接>> 2.vue…

卸载老版本的 vue-cli : npm uninstall vue-cli -g 安装新版本的 : npm install -g @vue/cli --安装新版本cli 同时nodeJS 要更新至 v8.9.x以上. 原型开发: npm install -g @vue/cli-service-global 原理开发的意思,是直接把vue文件运行起来.进入你vue文件目录,直接 vue server ,终端输出的地址,复制到浏览器上,可查看你vue文件输出 创建项目:vue create you…

vue 2.0 配置 rem 首先先安装postcss-px2rem   (百度可以) https://www.jianshu.com/p/e6476bbc2131 npm install postcss-px2rem 找到文件 build / vue-loader.config.js  添加 const px2rem = require('postcss-px2rem') postcss: function() { return [px2rem({remUnit: 75})]; } 在inde…

写在最前 虽然身为一个java后端工作者,前端还是要沾点的,基于vue的火热,所以平常的工作中项目前端基本都是vue.这次就主要讲一讲vue项目的创建,并从vue的安装开始讲起,附带上我之前安装使用时遇到的一些常见且解决了的问题. 安装node.js 下载node.js 这是官方的下载地址,选择对应版本下载安装即可,我下载的是Windos系统下.msi的64位安装包,除了安装目录,安装过程都默认即可. 配置系统环境变量 配置系统环境变量可使node.js相关的命令在系统全局使用 ①右键电脑,选择…

Vue 2.0 的响应式是基于Object.defineProperty实现的 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 property,并使用 Object.defineProperty 把这些 property 全部转为 getter/setter.Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因.(引用:https://cn…

一般webpack.config.js是默认放在根目录的,不在根目录的时候需要在package.json中制定位置,我的配置文件目录是config/webpack.config.js,在package.json文件中的配置为: "scripts": { "build": "webpack --mode production --config ./config/webpack.config.js", "dev": "w…

一.开发环境配置准备 1.创建dev.config.js文件 用来配置开发环境的代码 2.安装webpack-merge cnpm install webpack-merge -D 用来合并webpack配置项 二.开发环境基础配置代码 //合并webpack配置项constwebpackMerge=require("webpack-merge");//path模块constpath=require("path");//基础配置项constbaseConfig=re…

module.exports = {// 部署应用时的基本 URLbaseUrl: process.env.NODE_ENV === 'production' ? '192.168.60.110:8080' : '192.168.60.110:8080', // build时构建文件的目录 构建时传入 --no-clean 可关闭该行为outputDir: 'dist', // build时放置生成的静态资源 (js.css.img.fonts) 的 (相对于 outputDir 的) 目录as…

一.首先使用npm创建vue项目框架: 1.安装vue-cli:    $ npm install --global vue-cli 2.初始化项目:$ npm init webpack  项目名 3.在项目目录下安装element-ui依赖: $ npm i element-ui -S import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 4.引入e…

1. process 这个process是什么?为何都没有引入就可以使用了呢? process 对象是一个 global (全局变量),提供有关信息,控制当前 Node.js 进程.作为一个对象,它对于 Node.js 应用程序始终是可用的,故无需使用 require(); 那procee.env呢?是啥? process.env属性返回一个包含用户环境信息的对象 2. builds 编译的对象的配置,蓝色框 框起来的是对此对象的注释,这个的解释就是只运行时(CommonJS). 使用bundl…

1.第一次报错后,仔细看了官方文档,少了第一步,下载UEditor源码,放到public目录(前提你用的是vue-cli 3.x的版本). 好那就下载,下载的是vue-ueditor-wrap作者修复的版本,选择了下面这个版本. 2.放进去后,还是报错,WTF!,看了好多地方,看了看报错的文件路径,没问题啊!确定没问题啊,就是这个路径啊,可是就是打不开这个路径!郁闷 3.还是路径有问题,根据项目里的ip.js看到了问题 这个ip.js就可以打开,所以还是你的路劲配的不对! 4. 给组件添加配置属…

downloadFile(url, fileName) { axios.get(url, { responseType: 'blob' }) .then(({ data }) => { // 为了简单起见这里blob的mime类型 固定写死了 let type = 'application/pdf;' //'image/png' let blob = new Blob([data], { type: type }) let link = document.createElement('a');…

参考链接:https://blog.csdn.net/ai520587/article/details/84098601…

今天正好新建了一个项目,在用less的时候就各种花样报错提示我: Failed to resolve loader: less-loaderYou may need to install it.Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'Error from chokidar (C:\): Error: EBUSY: resource busy or locked…