- 博客(27)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 vue项目打包步骤
vue项目打包终端运行命令 npm run build打包成功的标志与项目的改变，如下图：点击index.html，通过浏览器运行，出现以下报错，如图：那么应该如下修改呢？具体步骤如下：1、查看package.js文件的scripts命令2、打开webpack.dev.conf.js文件，找到publicPath: config.dev.assetsPublicPath,按Ctrl点击，跳转到in...
2018-06-25 01:04:39
312823
29
原创 assets与static的区别
assets与static的区别相同点：资源在html中使用，都是可以的。不同点：使用assets下面的资源，在js中使用的话，路径要经过webpack中file-loader编译，路径不能直接写。assets中的文件会经过webpack打包，重新编译，推荐该方式。而static中的文件，不会经过编译。项目在经过打包后，会生成dist文件夹，static中的文件只是复制一遍而已。简单来说，stat...
2018-06-25 00:27:19
28998
10
原创 生命周期（钩子函数）
生命周期（钩子函数）一、生命周期过程解释实例创建之后，初始化事件和生命周期，而后触发beforeCreate。beforeCreate，当前实例创建之前，很少操作，一般用于加载动画，比如创建一个菊花旋转。created表示当前实例创建完成，组件、属性等初始化完成，一般封装一个方法，比如getDataFromNetwork，从网络请求数据。this.getDataFromNetwork()调用，触发...
2018-06-25 00:15:21
14620
1
原创 vue路由
vue路由一、vue关于路由的5个重要对象1、router-view：类似angular中的router-outlet，router-view会不断的改变成要展示的组件；2、router-link：直接使用该标签进行标签导航，会被渲染成a标签；3、routes： 数组，在该数组中配置所有的路由；4、router： 通过router，进行方法导航,方法有push(),replace(...
2018-06-24 13:14:47
562
原创 vue-router的使用方法介绍
vue-router对于大多数单页面应用，都推荐使用官方支持的 vue-router 库。学习网址：https://router.vuejs.org/installation.html#direct-download-cdn提示：本篇博客仅仅介绍搭建项目之后，再下载vue-router的情况，并非搭建项目是直接引入vue-router。一、安装方法（npm方式）在终端运行以下指令npm insta...
2018-06-24 11:52:10
1882
原创 vue-axios的使用及其get与post网络请求
一、vue-axios学习网址网址1： https://github.com/imcvampire/vue-axios网址2： https://www.npmjs.com/packge/axios二、vue中get与post请求vue高版本中，推荐使用axios进行网络请求，而不再使用vue-resource。在vue04项目中，在终端运行 npm install --sa...
2018-06-23 02:39:20
177041
10
原创 利用node.js搭建服务器
服务器环境的搭建步骤1、新建文件夹（文件名为server），利用webstorm打开；2、在终端运行 npm init -y (目的：生成package.json项目描述文件)；3、在终端运行 npm i express --save（目的：下载express模块）；4、新建一个server.js文件,利用node.js开发服务器环境；代码如下/** * Created by yangbaosh...
2018-06-22 21:07:24
3918
原创 webstorm常用的设置及操作图解（持续更新中）
目录1、webstorm开启es6环境2、新建vue文件的模板设置3、webstorm设置代码自动换行4、webstorm开启代码提示5、面板展示与增加面板展示项6、全局搜索（shift键双击，搜索包括文件，变量，函数等等）7、设置主题样式、字体大小、字体样式、行高（Ctrl + Alt + S）8、文件修改的历史版本对比9、开启代码补全（参考网址：http...
2018-06-22 13:02:26
30057
1
原创 vue-cli创建项目目录结构解释
vue-cli创建项目目录结构解释文件/文件夹解释build和configwebpack配置相关的文件；将来利用中间件实现两个不同于之间的转发，需要配置。node_modules项目开发依赖的一些模块src将来的开发大多在这里，我们关注的重点static静态文件，不经过webpack编译，直接可拿来用的.gitkeep新建目录没有文件的话，目录不会在远程服务器出现的，加上该文件，即使是空的文件夹，...
2018-06-21 22:13:26
1715
原创 利用vue-cli创建项目步骤简述
利用vue-cli搭建项目步骤准备步骤包括1、安装node.js，运行 node -v 检查版本，运行 npm -v 检查版本；2、安装webpack，运行 npm install webpack -g 运行 webpack -v 检查版本第一步：全局安装vue-cli做法：在终端运行 npm insall --global vue-cli第二步：在终端输入 cd空格，并将新建的文件夹（将来保存工...
2018-06-21 21:36:31
2921
1
原创 安装vue-cli时-4058报错的解决方法
一、报错信息安装vue-cli时-4058报错二、解决方法终端运行以下指令npm --registry https://registry.npm.taobao.org info underscore而后运行下面的指令cnpm install --global vue-clivue-cli安装成功的标志终端运行下面的指令查看vue版本vue --version三、备注本人经历该vue-cli安装报错...
2018-06-21 21:02:21
7417
原创 Vue入门-动画
动画动画,本质是一个效果,与交互功能无关, 通常开发过程中首先实现功能，而后添加动画。Vue中常用的过渡动画，实现显示或者隐藏等，优化用户体验。使用场景Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡1、条件渲染 (使用 v-if)2、条件展示 (使用 v-show)3、结合路由切换使用步骤1、把需要结合动画变化的元素,使用transition...
2018-06-21 18:28:26
483
转载 Vue入门-插槽
slot插槽Vue 实现了一套内容分发的 API，将 <slot> 元素作为承载分发内容的出口。使用slot插槽,可以更好的实现组件复用。具名插槽可以将内容进行细分，指定内容放置的插槽位置。作用域插槽可以让内容使用插槽中绑定的数据，而不是父级中的变量。示例代码（参照上面的解释及代码注释理解代码）<!DOCTYPE html><html lang="en">...
2018-06-21 17:16:11
274
原创 Vue入门-兄弟组件之间的通信
兄弟组件通信的逻辑实现注意: 借助于一个公共的Vue的实例对象，不同的组件可以通过该对象完成事件的绑定和触发.第一步: 在child1子组件中,给button按钮绑定一个点击事件toChild2, 在事件中我们通过公共的vue对象totalVm.$emit()方法去触发一个定义事件event1,并传递我们的参数str.第二步: 在child2组件创建的钩子(created())中监听事件event...
2018-06-21 11:55:38
2294
原创 Vue入门-子组件向父组件通信与父组件调用子组件中的方法
子组件向父组件通信子组件的button按钮绑定点击事件,事件方法名为sendToParent(),该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg);在父组件引入子组件,并给cus-event事件绑定doAction($event)方法,该方法中this.msg = e;console.log(e),而msg已经在data中声明,其值为”...
2018-06-21 11:38:11
1313
原创 Vue入门-父组件向子传值与子组件调用父组件中的方法
Vuex是什么？一般用于中大型项目，管理组件中的传值方式，相当于angular中的全局服务，里面有store声明的属性可以共享，每个组件都可以绑定。想要改变值，可以向store提交一个突变，方法便会执行一次。父向子传值1、child子组件对desc属性绑定的是sString,而sString的值是高渐离,故结果为: 显示父级传过来的值:高渐离。注意:子组件要接收父组件传进来的值,那么一定要放在pr...
2018-06-21 10:52:43
5030
原创 Vue入门-组件基础
组件支持两种定义方式全局组件语法：Vue.component('my-component-name', {// ... 选项 ...})方式一：在{}中写入template模板结构方式二：将template模板结构写到组件外面，指定对应的模板名，即id属性。局部组件语法：在实例中添加components，注入即可。方式一：在实例中添加components,注入子组件方式二：将template模板结...
2018-06-20 21:34:02
332
原创 Vue入门-侦听器
属性的侦听方式有两种：1、实例中的watch属性2、vm1.$watch参考代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>监听属性变化</title> <script
2018-06-20 19:48:44
1425
原创 Vue入门-计算属性
计算属性, Vue独有的特性计算属性跟方法的对比1.写成方法调用,也可以实现功能,但是由于方法是调用的,每当数据更新引起页面更新,每一个方法调用都会再执行一次,当方法很多且逻辑很复杂时,内存开销会很大.2.计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值.所以，对于任何复杂逻辑，你都应当使用计算属性。小插曲面试题目:解决在输入框输入内容时,频繁向服务器请求的问题...
2018-06-20 19:10:58
381
原创 Vue入门-自定义指令
自定义指令当需要对普通DOM元素进行底层操作时,可以考虑自定义指令来实现。语法: Vue.directive(指令名,配置对象)。1.创建全局指令(特点:可以在任意不同的实例对象挂载的范围进行使用) <h1 v-highlight="color">鼠标移入该标签时，标签高亮显示</h1> Vue.directive('highlight', { ...
2018-06-20 17:48:48
711
原创 Vue入门-数组与对象的检测
关于监测数组与对象的变动一.数组的更新监测下面的方法,修改数组,可以引起视图更新渲染(因为数组与页面绑定的关系，即会导致页面改变)。push（尾部插入）, pop（尾部删除）, unshift（头部插入）, shift（头部删除）, splice, sort（排序）, reverse（倒叙输出）注意事项:1.当使用filter, map, contact, slice, 返回值...
2018-06-20 17:05:59
512
原创 数组的常见操作
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>数组常见操作</title> </head> <body> </body></html><script src="htt...
2018-06-19 12:16:13
362
原创 前端面试题集锦
1.form中的input可以设置为readonly和disable，请问两者有什么区别？readonly不可编辑，但可以选择和复制；值可以传递到后台disabled不可编辑，不能复制，不能选择；值不可以传递到后台2.JavaScript有几种数据类型？Number，String，Boolean，Null，Undefined，Object，Array3.请用css样式中的border来制作箭头图标...
2018-06-11 21:42:24
923
原创 Vue入门-自定义过滤器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自定义过滤器</title> <script src="https://cdn.jsdelivr.net/npm/
2018-06-10 18:26:37
286
原创 VScode常用插件安装及介绍
1、HTMLSnippets （提示初级的H5代码片段）；2、HTML CSSSupport （让 html 标签上写class 智能提示当前项目所支持的样式）；3、jQuery CodeSnippets （jq的必备品）；4、view inbroswer （ctrl + f1 在浏览器中运行当前的html）；5、vscode-icon（让vscode的文件夹目录添加上对应的图标）...
2018-06-10 17:10:45
7088
3
原创 tab选项卡简易代码
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>tab选项卡代码</title> <style type="text/css"> .title { width: 500px; height: 50...
2018-06-04 19:48:01
6386
转载 移动H5前端性能优化
PC优化手段在Mobile侧同样适用。Mobile侧因手机配置原因，除加载外渲染速度也是优化重点。优化可从以下方面出发：一、加载优化1、合并css，javascript。2、合并小图片，适用雪碧图。3、缓存一切可以缓存的资源。4、使用长Cache。5、使用外联引用css，JavaScript。6、压缩HTML、css、JavaScript。7、启用GZip8、...
2018-06-04 18:53:11
428
响应式网站设计（gulp打包与未打包两版）
2018-08-24
vue-cli及vue路由学习
2018-06-25
vue-axios的使用及其中get与post网络请求
2018-06-23
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人