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

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

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

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. servler中表单加了enctype="multipart/form-data"属性后request就接收不到表单传过来的值了

    在解决博问node.js接受参数的时候,发现当form中添加enctype:"multipart/form-data",后台确实获取不到数据,于是跑到百度上查了一下,终于明白为什么 ...

  2. 2018.10.31 NOIP模拟 一些情报(倍增)

    传送门 题目并不难(想) 其实就是用倍增维护几个树上信息. 也就这么几个: 子树内最长链及其后继点. 子树内次长链及其后继点. 子树内第三场链(也就是dzyodzyodzyo口中鬼畜的次次长链) 点i ...

  3. Apache和nginx 域名配置

    apache配置 一.hosts配置: 1.用编辑器打开hosts文件,位置:C:\Windows\System32\drivers\etc目录下 2.在hosts文件里添加自己的域名配置,配置规则如 ...

  4. es6函数的新语法

    函数的默认值 function(x,y=10){ //赋予了y就有了默认值为10,如果y赋值了,就回被覆盖,否则就是默认值10 变量已经有默认值了,所以不用再次用let或者const声明啦 }

  5. MySQL导入导出表数据

    原文链接:http://blog.163.com/yang_jianli/blog/static/1619900062010111011041228/ 1.这里的导出和mysqldump不同,只是导出 ...

  6. C语言实现BMP图片生成

    ## #include <stdio.h> #include <stdlib.h> #include <string.h> typedef unsigned cha ...

  7. (转)WCF中神秘的“8733"端口和“Design_Time_Addresses”

    转自:http://blog.csdn.net/bitfan/article/details/4193319 如果使用Visual Studio 2008 SP1开发WCF应用程序时,会发现当使用Vi ...

  8. activeMq之hello(java)

    消息队列activeMq,   节省响应时间,解决了第三方响应时间长的问题让其他客户可以继续访问, 安装activeMq apache-activemq-5.14.0-bin\apache-activ ...

  9. Shell编程-09-Shell中的函数

    目录 基本语法 函数执行 函数示例     函数可以简化程序的代码量,达到更好的代码复用度,因此会让程序变得更加易读.简洁和易修改.其作用就是将需要多次使用的代码整合到一块,使其成为一个整体,然后通过 ...

  10. 分类算法之朴素贝叶斯分类(Naive Bayesian classification)

    1.1.摘要 贝叶斯分类是一类分类算法的总称,这类算法均以贝叶斯定理为基础,故统称为贝叶斯分类.本文作为分类算法的第一篇,将首先介绍分类问题,对分类问题进行一个正式的定义.然后,介绍贝叶斯分类算法的基 ...