语法: require.context(directory, useSubdirectories = false, regExp = /^.//); directory {String} -读取文件的路径 useSubdirectories {Boolean} -是否遍历文件的子目录 regExp {RegExp} -匹配文件的正则 // 实现自动化导入. const context = require.context('./', true, /\.js$/) // console.log(co

一. 组件化开发 1.1 组件[component] 在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js定义功能的特效,因此就产生了一个功能先关的代码把[HTML.css和javascript]封装到一个文件的模式,我们成为“组件”. 组件有两种:默认组件[全局组件] 和 单文件组件 1.1.1 默认组件 <div id="app"> <addnum></addnum> <addnum>&

1 生成项目目录 使用vue自动化工具可以快速搭建单页应用项目目录. 该工具为现代化的前端开发工作流提供了开箱即用的构建配置.只需几分钟即可创建并启动一个带热重载.保存时静态检查以及可用于生产环境的构建配置的项目: // 生成一个基于 webpack 模板的新项目 vue init webpack 项目名 例如: vue init webpack myproject // 启动开发服务器 ctrl+c 停止服务 cd myproject npm run dev # 运行这个命令就可以启动node

一.组件的概念 1.概念 组件(Component)是自定义封装的功能.在前端开发过程中,经常出现多个网页的功能是重复的,而且很多不同的网站之间,也存在同样的功能. 而在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js来定义功能的特效,因此就产生了把一个功能相关的[**HTML.css和javascript]代码封装在一起组成一个整体的代码块封装模式,我们称之为“组件”. 所以,组件就是一个html网页中的功能,一般就是一个标签,标签中有自己的内

5. 组件化开发 5.1 组件[component] 组件(Component)是自定义封装的功能.在前端开发过程中,经常出现多个网页的功能是重复的,而且很多不同的网站之间,也存在同样的功能. 而在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js来定义功能的特效,因此就产生了把一个功能相关的[HTML.css和javascript]代码封装在一起组成一个整体的代码块封装模式,我们称之为“组件”. 所以,组件就是一个html网页中的功能,一般就是一

一.简介 vue是一个渐进式的js框架.具体介绍查看官网: https://cn.vuejs.org 在vue框架中,有两个文件,当在开发阶段时使用完整版vue,因为有报错信息,而在上市阶段可以使用min版本的vue. vue不同于js和jquery的是,他是数据驱动框架而非事件驱动框架.也就是说其中是对数据进行实时监听的. vue结合了其他框架的优点,轻巧,中文api,双向绑定,双向绑定意味着其中是mvvm模式. vue的导入可以使用cdn: <!-- 开发环境版本,包含了有帮助的命令行警告

vue自动化路由 好久不见~ 若羽又开篇Vue的内容了. 年初的时候发布了第一版的ea-router自动化路由库,欢迎大家安装使用.［Github地址］ ［npm地址］ 经历一年的使用.还是发现了不少问题和不足的地方,因此在前段时间抽空整理了所有需求并做了个规划.并发布了一个版本.下面来看看其中的原理和实现吧. 前言 因为之前都是写后端逻辑,因此接触前端后始终不太习惯js的原生语法.更偏向于es6的class写法,并且从ECMAScript后续的标准来看,官方也是比较推荐class的写法来更好的

vue  Excel导入,下载Excel模板,导出Excel vue  Excel导入,下载Excel模板 <template> <div style="display: flex;"> <el-button @click="handleDownload" class="button_search" type="primary" size="medium" >下载模板&l

最近因为在给项目接入第三方SDK,遇到了一个比较烦人的事情就是,每次出包都要重新根据第三方SDK说明设置xcode,每次最少花20分钟来设置,如果出错的话就不一定是20分钟的事了,所以我决定要做一个自动化处理脚本. 在网上查了好多资料,用比对工具一步一步的比较project.pbxproj文件的不同,真是眼睛盯瞎了的感觉. 在伯乐在线上看到了一篇关于project.pbxproj文件的说明. 关于操作project.pbxproj文件有一下几个第三方库来参考 Xcodeproj CocoaPod

创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; window.jQuery = $; export default $; 导入JQuery,并赋值给window对象,使其成为一个全局变量. 在vue组件做如下引用 import $ from './assets/jquery-v'; import 'bootstrap-material-design'; //调用初始化 $(function(

Vue引入bootstrap主要有两种方法 方法一:在main.js中引入,此方法导入的bootstrap中对于html,body的一些预设置的css样式可能无效. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery --save-dev  若是运行报错,则运行cnpm install jquery (cnpm和npm都可以)这样就将jquery安装到了这个项目中. 然后修改webpack.base.conf.js(在bui

Vue引入bootstrap主要有两种方法 方法一:在main.js中引入 此方法导入的bootstrap中对于html,body的一些预设置的css样式可能无效 引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery --save-dev  若是运行报错,则运行cnpm install jquery (cnpm和npm都可以)这样就将jquery安装到了这个项目中. 然后修改webpack.base.conf.js(在build文

安装VUM 前面学习了普通组件以后,接下来我们继续学习单文件组件则需要提前先安装准备一些组件开发工具.否则无法使用和学习单文件组件. 一般情况下,单文件组件,我们运行在 自动化工具vue-CLI中,可以帮我们编译单文件组件.所以我们需要在系统中先搭建vue-CLI工具, Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+).你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本. nvm工具的下载和安装教程参考: windows:htt

Vue引入bootstrap主要有两种方法 方法一:在main.js中引入,此方法导入的bootstrap中对于html,body的一些预设置的css样式可能无效. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery --save-dev  若是运行报错,则运行cnpm install jquery (cnpm和npm都可以)这样就将jquery安装到了这个项目中. 然后修改webpack.base.conf.js(在bui

也许大家都是使用习惯了es5的写法喜欢直接用<Script>标签倒入js文件,但是很是可惜,这写法.在es6,或则说vue环境下不支持 真的写法是怎样? 首先.我们要改造我们要映入的外部js文件,改成下面这个格式.主要是红色方块内部代码,我们需要将我们的模块“抛出”,让人能获取到 代码: function realconsole(){ alert("hello.thanks use me"); } export { realconsole } 其次,到我们的寄主那里,我们需

百度请求API接口:

前端项目打包部署,以前都是手工运行打包命令,打包结束后压缩,然后上传到服务器上解压部署.这种重复性的工作,确实有点让人烦,而且效率也不高. 本文基于 vue 的前端项目. GitHub 的代码仓库,简述在 CentOS7 上利用 jenkins 实现自动部署. 一.安装插件 NodeJS Jenkins -> Manage Jenkins -> Manage Plugins -> Avaliable 搜索 NodeJS,勾选 NodeJS,点击 Install without resta

有时我们需要导入外面的css文件(例如reset.css文件,bootstrap.css,jQuery.js文件),通常可通过import "name.css"的形式 对于reset.css类的文件,一般放置到布局外面使用,可以考虑的方式有: 1 main.js 中  (注意没有@) 2 外面布局中的style中 (注意style中用到的是@import )

// 引用vue和需要测试的组件 import Vue from 'vue' import HelloWorld from '@/components/HelloWorld' // 创建测试套件,一个测试组件写一个测试套件 describe('HelloWorld.vue', () => { // 测试用例,用来测试不同的方法或者显示的内容 it('should render correct contents', () => { const Constructor = Vue.extend(H

1.需求描述 在写vue的项目中,一般情况下我们每添加一个新页面都得添加一个新路由.为此我们在项目中会专门的一个文件夹来管理路由,如下图所示 那么有没有一种方案,能够实现我们在文件夹中新建了一个vue文件,就自动帮我们添加路由.特别在我们的一个ERP后台项目中,我们几乎都是一个文件夹下有很多子文件,子文件中一般包含index.vue, detail.vue, edit.vue,分别对应的事列表页,详情页和编辑页. 上图是我们的文件目录,views文件夹中存放的是所有的页面,goodsPlanni