文章已经废弃,当初年少无知犯的错,不要混用,留作警醒!

最近看了别人做的简历,简单炫酷,自己非常喜欢,于是打算自己做一个,尝试一下。

由于写这篇随笔的时候才开始动工,所以目前没有成品给大家看。

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 制作炫酷个人简历(一)的更多相关文章

  1. Vue + Bootstrap 制作炫酷个人简历(二)

    没想到隔了这么久才来更新. 用vue做简历,不是非常适合,为什么呢. 因为简历没什么数据上的操作,一般都是静态的内容. 不过都说了用Vue来做,也只能强行续命了. 这里是我做好的成品  非一般简历 由 ...

  2. 基于Bootstrap的炫酷jQuery slider插件

    简要教程 这是一款在原生bootstrap slider的基础上制作效果非常炫酷的jQuery slider插件.该slider插件可以自定义slider的颜色.形状.透明度和tooltip等属性,美 ...

  3. 用AI制作炫酷效果

    PART1:制作第一个效果 步骤一:新建一个800*600的画布. 骤二:从工具栏选“矩形工具”,创建一个800*600的矩形.白色的是画布,浅红色(我的AI之前保留的填充颜色,每个人都不一样)的是你 ...

  4. web报表设计器在线制作炫酷图表

    相信很多人都看过这些大屏的图表,是不是感觉效果很酷炫,做起来会很复杂,按照传统的方式去做,使用数据分析工具结合ps美化可能耗时要数月才能做出来.但这个时候用Smartbi自助仪表盘功能,全方位的满足各 ...

  5. vue 写一个炫酷的轮播图

    效果如上图: 原理: 1.利用css 的 transform 和一些其他的属性,先选五张将图片位置拍列好,剩余的隐藏 2.利用 js 动态切换类名,达到切换效果 css代码如下 .swiper-cer ...

  6. vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)

    前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...

  7. css3制作炫酷导航栏效果

    今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...

  8. canvas,制作炫酷的时钟和倒计时

    html部分 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec3 } p.p2 { margin ...

  9. 制作炫酷banner js插件,revolution

    这是一款非常强大的内容切换插件,它基于jQuery,它充分响应,支持移动设备,支持手机触摸,键盘翻页:它内置幻灯.视频播放计时器,它拥有各种模式:自定义,自动响应,全屏:它有多种动画效果.3d效果.. ...

随机推荐

  1. sql创建备份表和复制数据到备份表

    1.复制表结构及数据到新表CREATE TABLE 新表 SELECT * FROM 旧表 这种方法会将oldtable中所有的内容都拷贝过来,当然我们可以用delete from newtable; ...

  2. Bootstrap之Bootstrap组件

    一 文本居中 col-xx-offset-xx:水平居中 center-block:使用于不涉及float标签的水平居中,也不涉及列的居中,让哪里居中就写到哪里,本质是:margin:0 auto. ...

  3. 2019.01.02 poj1322 Chocolate(生成函数+二项式定理)

    传送门 生成函数好题. 题意简述:一个袋子里有ccc种不同颜色的球,现要操作nnn次,每次等概率地从袋中拿出一个球放在桌上,如果桌上有两个相同的球就立刻消去,问最后桌上剩下mmm个球的概率. 第一眼反 ...

  4. 2018.11.06 洛谷P1099 树网的核(最短路+枚举)

    传送门 之前看李煜东的书一直感觉是道神题. 然后发现这题数据范围只有300?300?300? 直接上floydfloydfloyd然后暴力就完了啊. 代码: #include<bits/stdc ...

  5. PHP实现图片批量压缩

    set_time_limit(0); global $source_dir; global $target_dir; $source_dir = "D:/images/";//目标 ...

  6. (17)Questioning the universe

    https://www.ted.com/talks/stephen_hawking_asks_big_questions_about_the_universe/transcript00:13There ...

  7. 更新源pip

    国内镜像源列表 豆瓣(douban) http://pypi.douban.com/simple/清华大学 https://pypi.tuna.tsinghua.edu.cn/simple/阿里云 h ...

  8. vba中变量作用域

      参考:http://club.excelhome.net/thread-1237085-1-1.html 全局变量例子public 变量1 AS IntegerSub LLL()变量1 = 111 ...

  9. CentOS7 安装可视化脚本安装包Webmin

    一.简介 Webmin是一个基于Web的Linux系统管理界面.你就可以通过图形化的方式设置用户账号.Apache.DNS.文件共享等服务. 二.安装 1.下载安装包到本地Windows系统 http ...

  10. OOP中的六种关系以及和JDK或框架中源码进行匹配对应

    前言:这六种关系里:泛化=实现>组合>聚合>关联>依赖:其中组合-聚合-关联这三个如果只是给出一段代码是无法判断具体是什么关系的,需要配合语义或说业务场景来能进行区分(和设计模 ...