前言: 一般来说,一个web项目的生产环境和测试环境的服务器地址一旦确定下来,很少会频繁变动的.那么就可以单独写一个脚本文件,通过当前访问的域名来判断当前的访问环境,然后再通过一定的规则获取对应的服务器地址.如此一来,只要设计好服务器地址适配文件,那么只需要打一次包,就可以自动区分不同的服务器环境了.你不用再为每次打包上传不同环境都要手动改服务器地址而烦恼,也不会再出现忘了改配置文件而连接到错误的服务器上. 解决方案: 配置所有环境服务器地址变量——获取当前访问域名——根据域名判断是否包含在服务…

一般使用 vue-cli 下来的项目是可以直接访问局域网 IP 打开的,比如 192.168.1.11:8080 .但是最近公司的一个项目只可以通过 localhost 访问. 需要配置一下,才可直接用局域网 IP 访问,方法如下: 给 dev 添加--host 0.0.0.0 属性: "scripts": {   "dev": "webpack-dev-server --inline --progress --config build/webpack.d…

遇到的问题: 在vue项目开发过程中,我们常常会在页面中添加背景图片.可是当我们在样式中添加了背景图片,编译打包部署到服务器上时,发现图片并不能显示出来,这是为什么呢~~~ 我们一般写的css样式如下: background: url("../../assets/logo.png") no-repeat; 问题原因: 因为在编译打包后,图片的路径解析出现了问题. 解决方法: 1.在data中定义如下: export default { name: 'index', data() { r…

步骤一:小程序 生命周期 //app.js App({ onLaunch: function () { //当小程序初始化完成时,会触发onLaunch(全局只触发一次) }, onShow: function () { //当小程序启动,或从后台进入前台显示,会触发onShow }, onHide: function () { //当小程序从前台进入后台,会触发onHide }, onError: function (msg) { //当小程序发生脚本错误,或者api调用失败时,会触发onEr…

全局css样式,首先在静态assets中写好文件,然后要在main.js中配置 // 配置全局css样式 // import '@/assets/css/global.css' require('@/assets/css/global.css') //上面两种都可以实现全局样式的导入,但是第二种容错率较好,更健壮,比较常用,第一种对环境要求比较高 全局js样式,也是首先要在静态assets文件中写好,然后再main.js中进行配置 // main.js //配置全局settings.js imp…

1.首先需要在根目录的index.html文件加入如下代码 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 2.npm安装依赖 安装babel-polyfill 插件 指令:npm install babel-polyfill --save-dev 3.在入口文件main.js文件中引入插件 import 'babel-polyfill' 4.需要在webpack.base.config.js配…

序 上一篇已经把基本架子搭起来了,现在来增加css.scss.自动生成html.css 提取等方面的打包.webpack 默认只能处理js模块,所以其他文件类型需要做下转换,而loader 恰恰是做这个事情的,来试试一步一步的完成这个事情吧. 1.安装 normalize.css normalize.css是一种CSS reset的替代方案.它在默认的HTML元素样式上提供了跨浏览器的高度一致性.相比于传统的Css reset,Normalize.css是一种现代的.为HTML5准备的优质替代方…

vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 这种跨域错误. 要想本地正常的调试,解决的办法有三个: 一.关闭谷歌浏览器的同源策略,这样就不存在跨域问题了. window 新建一个 chrome.exe 的快捷方式, 并且关闭所有的chrome浏览器 设置参数,关闭 同源策略 --a…

Vue项目部署问题及解决方案 Vue-Router 有两种模式,默认是 hash 模式,另外一种是 history 模式. hash:也就是地址栏里的 # 符号.比如 http://www.example/#/hello,hash 的值为 #/hello.特点:hash 虽然出现 URL 中,但不会被包含在 HTTP 请求中,对后端不会产生什么影响,改变 URL 不会重载页面. history:利用了 HTML5 History Interface 中新增的 pushState() 和 repl…

https://www.w3ctech.com/topic/2052 如何为 Vue 项目写单元测试 前端工程 明非 2017-07-18 4685 访问 1 分享 微信分享 译者:明非 链接:https://fanmingfei.com/posts/A_Vue_Unit_Text_Tutorial.html 原文:https://scotch.io/amp/tutorials/how-to-write-a-unit-test-for-vuejs?from=timeline&isappinsta…

写在前面 Vue-Router 有两种模式,默认是 hash 模式,另外一种是 history 模式. hash:也就是地址栏里的 # 符号.比如 http://www.example/#/hello,hash 的值为 #/hello.特点:hash 虽然出现 URL 中,但不会被包含在 HTTP 请求中,对后端不会产生什么影响,改变 URL 不会重载页面. history:利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState()…

之前电脑已经安装 Node环境和 vue-cli脚手架,但是过段时间没有使用,然后现在用 vue-cli 搭建项目的时候,启动服务器的时候报错,无法启动成功,摸索半天,发现是因为 Node和vue-cli 的版本过低,都需要更新,更新过后成功启动...... 以下是 Node 和 vue-cli 更新的总结: 一. vue-cli更新 在百度了好久,也试了好多方法,没用,最后使用以下方法实现 vue-cli 更新: 1. 先全局卸载vue-cli: npm uninstall vue-cli -…

各个文件夹 node_modules:用来放环境依赖 public:用来放公共资源,里面的index.html文件,就是初始的挂载点.被app.vue给取代了. src:放各种资源的. assets:用来放静态资源的,比如图片之类的. components:防止各种小组件,相当于是子组件的子组件. router:路由,用来设置哪个url访问哪个也免得组件. store:仓库. views:都是子组件,用来替换App.vue里面的,然后展示这个子组件,所以也叫页面组件,里面可以放视图组件. 文件…

重新接触vue,开始学习使用IDE对vue项目进行配置和运行项目. 1.前面的准备 一般的教程都能到通过命令行运行npm run dev,并通过结果显示的端口,用浏览器访问自己的vue项目的结果.但是之前没有配置过IDE,并不能够简简单单地用Intellij IDEA打开已有项目然后运行. 2.给Intellij IDEA下载vue插件 点进去左上角File-Settings-Plugins并搜索插件vue,选中vue.js安装并按要求重启IDE. 3.一些简单的配置 进入File-Settin…

一.前言 现阶段手上vue的项目差不多快完了,空闲之余回反复对整个项目的代码结构.实现细节以及框架上的做了一些思考和优化.下面打算把想到的和重点实现的方法记录一下. 二.回顾 对于常规操作,这里不做过多的阐述,我们只讨论重点部分 1.登录模块:这块我们用了两个校验,一个是权限校验一个是账号校验.第一个校验通过之后执行第二个校验,两者通过登录成功,页面跳转. a.这里网络请求用的是axios,它是基于promise封装的一个http库,所以用了两个.then()的链式写法,当然也支持多个链式操作.…

前言:跨域请求是在本地开发时经常遇到的需求,也很简单,只是几句代码配置一下的问题.我初次配置跨域请求时由于官方的说明太简洁,找到的教程又落伍,调试了一番并没有解决问题,到最后解决问题,已花费了很多时间精力.所以再搭个项目从头走一遍,不敢说是教程,仅作记录. 说明:本文项目基于 Vue CLI ^4.3.0,Node.js v12.13.0. 和 express ~4.16.1 构建,未安装的话则需要先安装,后文不再说明. 1.在桌面运行 cmd,使用命令 vue create demo 创建一个…

VsCode调试vue项目 VsCode如何调试vue项目,VsCode需要安装插件以及配置launch.json文件. 找到"扩展"或者按快捷键"Ctrl+Shift+X",如下图,输入Debugger for Chrome查找,并安装. 配置launch.json 打开存储库,在网页上查看信息,参考官网的Launch配置本地的launch.json 本地launch.json配置(如果找不到这个文件,点击运行->打开配置) 本地配置文件launch.jso…

最近在做我的小爱ADMIN后台管理系统,结合当前市场后台管理系统对相关功能的需求,我又开始新增了一些新的功能和组件,如分享功能组件,项目国际化功能:项目完成后,部署在nginx服务器,发现首次访问的速度特别慢,严重的影响了用户体验,因此,我又开始进行了一系列的前端性能优化;以及将优化后的项目部署到nginx服务器二级子目录的注意细节. 效果演示地址 github地址 分享功能 背景说明 用微信,微博等做网站的第三方登录及用微信和支付宝进行支付,都需要注册开发者账号和添加网站应用,比较麻烦.另外,…

首先在初始化一个vue项目之前,我们需要下载node.js,并且安装! 下载地址: nodejs.cn/download 安装完成之后,windows+r 运行命令 cmd  输入node -v  检查是否已经安装成功.如果会显示版本信息,说明安装成功! 现在就可以使用node中的npm包管理器来构建vue项目 第一步,由于npm直接下载资源网速会比较慢,可以用淘宝镜像来代替,运行命令 npm install -g cnpm --registry=https://registry.npm.tao…

一.geetest滑动验证 geetest官方文档地址:https://docs.geetest.com/ 产品——极速验证:基于深度学习的人机识别应用.极验「行为验证」是一项可以帮助你的网站与APP识别与拦截机器程序批量自动化操作的SaaS应用.它是由极验开发的新一代人机验证产品,它不基于传统“问题-答案”的检测模式,而是通过利用深度学习对验证过程中产生的行为数据进行高维分析,发现人机行为模式与行为特征的差异,更加精准地区分人机行为. 1.web部署介绍 客户端官方文档:https://doc…

团队开发前端VUE项目代码规范 2018年09月22日 20:18:11 我的小英短 阅读数 1658   一.规范目的: 统一编码风格,命名规范,注释要求,在团队协作中输出可读性强,易维护,风格一致的代码 二.开发SRC目录: 1.Vuex目录 (状态树配置) 2.Router目录(路由配置) 3.Pages目录 (放置主路由组件 注意命名规范) 4.Common目录 (放置静态文件) 5.Config目录 (全局配置项,路由拦截,报错信息,等枚举信息) 6.Api目录 ( 相关全局请求调用配…

文章原址:https://www.cnblogs.com/yalong/p/11714393.html 背景介绍: 以前写的公共组件,后来需要添加一些功能,添加了好几次,每次修改我都要测试好几遍保证以前的功能不受影响,有次我测试遗漏导致组件出现bug,而且由于是公共组件,我每次修改还得让其他小伙伴更新组件,很是麻烦,所以一定要写测试, 对自己负责,也是对他人负责! 前端测试介绍 1.单元测试(unit测试)单元测试是把代码看成是一个个的组件,从而实现每一个组件的单独测试,测试内容主要是组件内每一…

一.Node安装 windows 1. Node.js (>=8.9, 推荐8.11.0+) Node官网下载 .msi 文件,按步骤下载安装即可. 安装完之后在cmd中输入 node -v,若显示版本号,则说明安装成功. 2. Git(命令行终端) Git官网下载安装即可. Linux apt-get install nodejs node -v apt-get install npm npm -v npm命令1.得到原本的镜像地址 npm get registry 2.设置成淘宝 npm c…

基于Vue和Quasar的前端SPA项目实战之序列号(四) 回顾 通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之布局菜单(三)的介绍,我们已经完成了布局菜单,本文主要介绍序列号功能的实现. 简介 MySQL数据库没有单独的Sequence,只支持自增长(increment)主键,但是不能设置步长.开始索引.格式等,最重要的是一张表只能由一个字段使用自增,但有的时候我们需要多个字段实现序列号功能或者需要支持复杂格式,MySQL本身是实现不了的,所以封装了复杂序列号,支持字符串和数字…

地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么把数据展示出来,用到的资源主要是element-ui和vue-resource,其它参考(vue-resource插件使用).今天讲到的一些功能开发,主要就是请求列表数据,详情数据,分页功能操作,搜索,搜索标签等的开发.今天这个,按照下面步骤,一步一步来.一个一个功能的做! 2.数据接口 我以'回款…

滑动等效果的初始化时机很重要,在vue项目开发中,需到mounted()钩子函数 (当组件中的DOM结构被渲染好并放到页面中后,会执行这个钩子函数,此时即可初始化滑动效果的js代码). 若组件未挂载到页面中,初始化效果无意义,无法获取元素. 因此,若需要操作页面中的元素,需在mounted()钩子函数中,此时DOM元素是最新的. 滑动效果成功后,底部的tabbar按钮的样式mui-tab-item需重新命名,因mui中的js代码与组件发生冲突…

一.首页轮播图 1.elementUI走马灯 elementUI中 Carousel 走马灯,可以在有限空间内,循环播放同一类型的图片.文字等内容. 这里使用指示器样式,可以将指示器的显示位置设置在容器外部: <template> <el-carousel indicator-position="outside"> <el-carousel-item v-for="item in 4" :key="item">…

github上项目地址:https://github.com/comonly/javaweb_blog/tree/master/blog_diverse_frontend 具体搭建流程及实现方式:http://comonly.cn/p/1129.html 项目内容 1. 项目通过:vue init webpack project-name 自动构建.2. 使用 axios 异步请求数据.3. 样式使用 ElementUI. 实现流程 利用vue-cli来搭建vue项目——通过npm创建一个vue…

1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 stylus,配置格式化设置 格式化成功后的截图 . 设置步骤 VSCode 扩展商店中搜索 stylus Supremacy 进行安装 之后在用户设置 setting.json 配置文件中添加如下配置即可 // 以下为stylus配置 "stylusSupremacy.insertColons&qu…

关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 由于vue相对来说比较平缓的学习过程和新颖的技术思路,使其受到了广大前后端开发者的青睐,同时其通俗易懂的API和数据绑定的功能也为其揽获了不少用户.本文主要讲解vue项目的构建与实战,因此不会太多涉及其API和语法部分,旨在帮助vue的入门级用户了解从零开始构建vue项目的步骤和方法. vue项目分类 首先,在构建一个vue项目之前我们需要了解vue项目的分类,这里我主要将其分为两类:(1)直接引…