Vue+Bootstrap制作炫酷个⼈简历(⼀)⽂章已经废弃,当初年少⽆知犯的错,不要混⽤,留作警醒!
最近看了别⼈做的简历,简单炫酷,⾃⼰⾮常喜欢,于是打算⾃⼰做⼀个,尝试⼀下。
由于写这篇随笔的时候才开始动⼯,所以⽬前没有成品给⼤家看。
emmm等我更新完会在最后附上成品。
现在开始!
⾸先配置项⽬
具体可以看我的
由于需要使⽤bootstrap,所以我们要安装jquery和bootstrap。
这⾥我们采⽤npm进⾏安装。
安装成功如图:
然后安装 jquery 这⾥根据官⽅⽂档我们选择v1.12.4
执⾏安装
npm install jquery@1.12.4 --save
再安ootstrap v3.3.7
npm install bootstrap@3.3.7 --save-dev
注意:
要在vue中使⽤jquery我们需要进⾏⼀点点⼩的配置
到 build/f.js 打开
到如图对应代码处改为如图:
'jquery': solve(__dirname, '../node_modules/jquery/src/jquery')
然后我们在 main.js 中使⽤
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
这个时候会提⽰ bootstrap必须使⽤jquery
然后我们在引⼊之前需要添加bootstrap项目
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
今天先把项⽬创建好。明天开始搭建框架。
最后提⼀句:现在前端⼯作不好啊,⼊⾏需谨慎。(⼥同胞⾃动忽略)
还有!⾼三党注意。
类似于数字媒体技术这种专业就不要选了,后悔⼀辈⼦都是⼩事,我怕你下辈⼦还后悔。不要问我为什么,我是我们学校最后⼀届,后⽆来者。
据知情⼈⼠了解,这个专业别⼈不认!
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论