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

今天先把項目建立好。明天開始搭建框架。

 

最後提一句：如今前端工做很差找啊，入行需謹慎。（女同胞自動忽略）

還有！高三黨注意。

相似於數字媒體技術這種專業就不要選了，後悔一生都是小事，我怕你下輩子還後悔。

不要問我爲何，我是咱們學校最後一屆，後無來者。

據知情人士瞭解，這個專業別人不認！