Vue + Bootstrap 制作炫酷个人简历(一)
文章已经废弃,当初年少无知犯的错,不要混用,留作警醒!
最近看了别人做的简历,简单炫酷,自己非常喜欢,于是打算自己做一个,尝试一下。
由于写这篇随笔的时候才开始动工,所以目前没有成品给大家看。
emmm等我更新完会在最后附上成品。
现在 开始!
首先 配置项目
具体可以看我的 Vue 配置项目
由于需要使用bootstrap,所以我们要安装jquery和bootstrap。
这里我们采用npm进行安装。
安装成功如图:
然后安装 jquery 这里根据官方文档我们选择v1.12.4
执行 安装
npm install jquery@1.12.4 --save
再安装bootstrap v3.3.7
npm install bootstrap@3.3.7 --save-dev
注意:
要在vue中使用jquery我们需要进行一点点小的配置
找到 build/webpack.base.conf.js 打开
找到如图对应代码处改为如图:
'jquery': path.resolve(__dirname, '../node_modules/jquery/src/jquery')
然后我们在 main.js 中使用
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
这个时候会 提示 bootstrap必须使用jquery
然后我们在引入之前需要添加
import $ from 'jquery'
如图:
你有可能会发现这样一个警告-->
因为我们前面引入了 $ 但是未使用。
这个,可以在需要使用的地方引入,将main.js中的删去即可。
最后我们可以试试,bs的样式和jquery的语句。
<template>
<div id="app" class="container">
<h1 class="page-header text-info">Hi World</h1>
</div>
</template> <script>
import $ from 'jquery'
export default {
name: 'App',
mounted: function () {
console.log($('.page-header').text())
}
}
</script>
结果:
duang~完美运行!
这个就是在vue中使用bootstrap
今天先把项目创建好。明天开始搭建框架。
最后提一句:现在前端工作不好找啊,入行需谨慎。(女同胞自动忽略)
还有!高三党注意。
类似于数字媒体技术这种专业就不要选了,后悔一辈子都是小事,我怕你下辈子还后悔。
不要问我为什么,我是我们学校最后一届,后无来者。
据知情人士了解,这个专业别人不认!
Vue + Bootstrap 制作炫酷个人简历(一)的更多相关文章
- Vue + Bootstrap 制作炫酷个人简历(二)
没想到隔了这么久才来更新. 用vue做简历,不是非常适合,为什么呢. 因为简历没什么数据上的操作,一般都是静态的内容. 不过都说了用Vue来做,也只能强行续命了. 这里是我做好的成品 非一般简历 由 ...
- 基于Bootstrap的炫酷jQuery slider插件
简要教程 这是一款在原生bootstrap slider的基础上制作效果非常炫酷的jQuery slider插件.该slider插件可以自定义slider的颜色.形状.透明度和tooltip等属性,美 ...
- 用AI制作炫酷效果
PART1:制作第一个效果 步骤一:新建一个800*600的画布. 骤二:从工具栏选“矩形工具”,创建一个800*600的矩形.白色的是画布,浅红色(我的AI之前保留的填充颜色,每个人都不一样)的是你 ...
- web报表设计器在线制作炫酷图表
相信很多人都看过这些大屏的图表,是不是感觉效果很酷炫,做起来会很复杂,按照传统的方式去做,使用数据分析工具结合ps美化可能耗时要数月才能做出来.但这个时候用Smartbi自助仪表盘功能,全方位的满足各 ...
- vue 写一个炫酷的轮播图
效果如上图: 原理: 1.利用css 的 transform 和一些其他的属性,先选五张将图片位置拍列好,剩余的隐藏 2.利用 js 动态切换类名,达到切换效果 css代码如下 .swiper-cer ...
- vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...
- css3制作炫酷导航栏效果
今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...
- canvas,制作炫酷的时钟和倒计时
html部分 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec3 } p.p2 { margin ...
- 制作炫酷banner js插件,revolution
这是一款非常强大的内容切换插件,它基于jQuery,它充分响应,支持移动设备,支持手机触摸,键盘翻页:它内置幻灯.视频播放计时器,它拥有各种模式:自定义,自动响应,全屏:它有多种动画效果.3d效果.. ...
随机推荐
- servler中表单加了enctype="multipart/form-data"属性后request就接收不到表单传过来的值了
在解决博问node.js接受参数的时候,发现当form中添加enctype:"multipart/form-data",后台确实获取不到数据,于是跑到百度上查了一下,终于明白为什么 ...
- 2018.10.31 NOIP模拟 一些情报(倍增)
传送门 题目并不难(想) 其实就是用倍增维护几个树上信息. 也就这么几个: 子树内最长链及其后继点. 子树内次长链及其后继点. 子树内第三场链(也就是dzyodzyodzyo口中鬼畜的次次长链) 点i ...
- Apache和nginx 域名配置
apache配置 一.hosts配置: 1.用编辑器打开hosts文件,位置:C:\Windows\System32\drivers\etc目录下 2.在hosts文件里添加自己的域名配置,配置规则如 ...
- es6函数的新语法
函数的默认值 function(x,y=10){ //赋予了y就有了默认值为10,如果y赋值了,就回被覆盖,否则就是默认值10 变量已经有默认值了,所以不用再次用let或者const声明啦 }
- MySQL导入导出表数据
原文链接:http://blog.163.com/yang_jianli/blog/static/1619900062010111011041228/ 1.这里的导出和mysqldump不同,只是导出 ...
- C语言实现BMP图片生成
## #include <stdio.h> #include <stdlib.h> #include <string.h> typedef unsigned cha ...
- (转)WCF中神秘的“8733"端口和“Design_Time_Addresses”
转自:http://blog.csdn.net/bitfan/article/details/4193319 如果使用Visual Studio 2008 SP1开发WCF应用程序时,会发现当使用Vi ...
- activeMq之hello(java)
消息队列activeMq, 节省响应时间,解决了第三方响应时间长的问题让其他客户可以继续访问, 安装activeMq apache-activemq-5.14.0-bin\apache-activ ...
- Shell编程-09-Shell中的函数
目录 基本语法 函数执行 函数示例 函数可以简化程序的代码量,达到更好的代码复用度,因此会让程序变得更加易读.简洁和易修改.其作用就是将需要多次使用的代码整合到一块,使其成为一个整体,然后通过 ...
- 分类算法之朴素贝叶斯分类(Naive Bayesian classification)
1.1.摘要 贝叶斯分类是一类分类算法的总称,这类算法均以贝叶斯定理为基础,故统称为贝叶斯分类.本文作为分类算法的第一篇,将首先介绍分类问题,对分类问题进行一个正式的定义.然后,介绍贝叶斯分类算法的基 ...