前言 vue-cli3推崇零配置，其图形化项目管理也很高大上。 但是vue-cli3推崇零配置的话，导致了跟之前vue-cli2的配置方式都不一样了。 别名设置，sourcemap控制，输入文件位置和输出文件位置和输出的方式，压缩js控制，打包webapck日志分析，externals忽略配置（外部引入），调试的端口配置，proxy接口配置等等的。 有时候还需要我们配置的，因为官方推荐的，并不适用于我们平时的开发所用的。 所以，我的vue.config.js配置是下面这...
公司使用 vue-cli 创建的 vue项目 在初始化时并没有做多页面配置，随着需求的不断增加，发现有必要使用多页面配置。看了很多 vue多页面配置 的文章，基本都是在初始化时就配置了多页面。而且如果使用这些实现，需要调整当前项目的目录结构，这点也是不能接受的。 最后，参考这些文章，在不调整当前项目目录结构实现了多页面的配置的添加。这里做下记录、总结，方便以后复用。如果还能有幸帮助到有同样需求的童鞋的话，那就更好了。...
使用方法： 在配合 Element-UI 一起使用时，会有2个问题： ####（1）、页面刷新后，通过按钮切换的语言还原成了最初的语言，无法保存 ####（2）、框架内部自带的提示文字无法更改，比如像时间选择框内部中的提示文字 关于第一个问题，可以在初始化VueI18n实例时，通过 localStorage 来为 locale 对象赋值 在切换语言的时候可以缓存不同的语言选项，并且可以长期保存，不会因为刷新网页而改变locale 的属性值 const i18n = new VueI...
需求首先介绍一下本项目的背景，是基于 vue-cli3.1.1 的单页应用，目前测试环境和生产环境都在线上，并且都在同一个域名下，其中生产环境部署在根目录下，测试环境部署在名为 test 的子目录下，根据生产环境和测试环境的不同，某些界面和交互有细微的差别。 根据以上项目的基本情况，分析出需求如下： 实现区分线上生产环境和线上测试环境的环境变量，供项目代码中全局使用。实现输入一行命令，执行两条指令，分别打包线上生产环境...
在终端中运行以下命令: vue create xxx // xxx为项目名称，例如 vue-project然后，系统会提示我们选择默认预设或手动选择功能。使用向下箭头键，我们手动选择功能，然后按Enter键。然后，我们将看到一系列功能选项。使用向下箭头键，我们将向下移动并使用空格键选择需要的功能，然后按回车键。Linter / Formatter 就是代码风格。 我们将使用 ESLint + Prettier我们将在保存时添加Lint的附加功能。我们将选择单独的配置文件。我们...
下载安装并配置VSCode 随便百度上搜个最新的VSCode安装好后，点击Ctrl + Shit + X打开插件扩展窗口进行插件扩展，这里要安装两个插件。 1、vetur插件的安装 该插件是vue文件基本语法的高亮插件，在插件窗口中输入vetur点击安装插件就行，装好后点击文件->首选项->设置 打开设置界面，在设置界面右侧添加配置 "emmet.syntaxProfiles": {"vue-html": "html","vue": "html" }2、eslint插件的安装 eslint智能错误检测插件，在具体开发中...
很偶然的今天想开个自己的小项目，记录一下最近项目工程上实现的一个小交互。按照之前运行非常流畅的配置走一遍，打包遇到各种坑。只好根据命令行的报错逐个排查，发现babel升级了一个大版本，已经到7.x了。看来每日沉迷项目，已经跟不上节奏了。这里记录一下遇到的问题以及解决方案。 1.webpack 4.x 插件 extract-text-webpack-plugin(node:2628) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` ins...
vue如何配置接口域名1.vue本身为运行脚手架项目自家搭载了一个nodejs后台环境，本地可通过proxyTable来处理跨域问题，但是上线（或生产环境）之后改域名真是一件麻烦的事情，所以进行一些配置。2.修改下面的两个文件，启动的时候自动判断环境来切换域名1.在开发环境下配置如下：config/index.js 2.其他配置3.主要内容为 4.其他配置
Vue 的用法没有变化: <template lang="pug">transition(name="sider")div.helloh3 {{msg}}p(:style="{color:#000}", :htmlData="msg") p labelbutton(@click="clickMe") clickTest </template>要注意的一点是: 标签后面如果有属性(括号内的) 他和括号之间不要加空格,加了空格就会被当成字符串解析 vue-cli 2+ 配置: 下载包: npm i -D pug pug-html-loader在build/webpack.base.conf.js 的 module 中添加规则: module: {rules: [{te...
使用vue-cli3已经有相当一段时间了，一直没怎么去注意其中的配置，所以趁着这段时间总结下应用过程中的一些经验，本文是从安装到开发使用的一个过程讲解，也可以说是新手向的文章，文字有点多，请耐心观看。 （一）安装： 1、下载安装node: 登陆node官网并选择自己合适的node版本进行安装； 2、安装vue-cli脚手架工具 npm install -g @vue/cli # OR # 推荐使用 npm install -g yarn # 如果已有安装，此步骤不需要 yarn global add ...
前言首先这篇文章是写给Vue新手的，老司机基本不用看了。 当我们刚接触vue的时候，特别是对于第一次用前端框架的同学来说，心情可以说是比较激动的，框架带来的种种新体验，是以前jQuery无法给你的兴奋和满足感。但是在体验了几个demo的新鲜感之后，我们就要考虑如何把框架结合到我们实际的开发中如何应用的问题了。 下面我主要总结三个和生产发布相关的问题：资源文件发布文件夹配置，图片文件的引用，以及后台接口调试方法。 一，...
首先确保VS Code 安装了 Vetur 和 Eslint 插件。 然后使用了vue-cli提供的简单webpack模板，这样创建的工程默认没有添加ESLint。 vue init webpack-simple test-vscode配置过程 全局安装最新的eslint npm i -g eslint@latest运行 eslint --init 会安装以下依赖 eslint-config-standard@latest eslint-plugin-import@>=2.2.0 eslint-plugin-node@>=5.2.1 eslint-plugin-promise@>=3.5.0 eslint-plugin-standard@>=3.0.0同时在项目目...
说起来有点丢人，我已经使用vue好久了，但是怎么从0开始配置一个vue项目，每次还是要百度。这次决定写个博客，加强下记忆，如果再记不住就直播自己的女朋友洗澡。 以下以新建一个图书管理项目为例。我使用vue3新建项目，对于创建一个项目来说，vue3真的比vue2简单很多。 1.初始化项目 1.1全局安装vue-cli 创建vue项目，首先要确保全局安装了vue命令行工具。 我这边使用yarn而不用npm，因为yarn要比npm好用的多，强烈推荐使用。如果...
1. 使用vue-cli3新建项目： https://cli.vuejs.org/zh/guide/creating-a-project.html 注意，我这里用gitbash不好选择选项，我就用了基本的cmd（系统命令提示符）：上下箭头和空格键可控制选项。 详细步骤： （1）vue create init： 这里我选择了自定义配置（2）使用上下箭头和空格进行选择，我这里选择了这四个，之所以没用css pre-processors是因为我的项目中要用postcss-cssnext，后面会有详细配置说明（3）后面的 Use class-st...
动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 template中,form和form-item的写法和绑定data里的值为空methods中，向后台获取数据的函数写法 1. form,form-item,input的写法[^code]<el-form :model="dynamicValidateForm" label-width="120px" ref="dynamicValidateForm"><el-form-item :key="domain.prop":label="domain.label":prop="domain.prop":rules="rules"v-for="domain in dyna...