Vue.js-Day07【項目實戰(附帶 完整項目源碼)-day02:學習能力、字體圖標(使用步驟)、在vue.js中使用jQuery】

 【項目源碼】
鏈接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA
提取碼:n6ol

目   錄

0、學習能力 

1、字體圖標

1.1、使用步驟

1.2、使用

2、在Vue中使用jQuery


0、學習能力 

  • 閱讀能力

    • 閱讀文檔

    • 閱讀博客

    • 閱讀書籍

  • 解決問題能力

    • 分析問題(思路問題、代碼編寫)

    • 解決問題

      • 思路問題:冷靜思考、調整思路!

      • 代碼問題:逐級反推、 縮小範圍!

      • 搜索引擎:百度(輸入問題點、更換關鍵字)

      • 請教同事:簡短明瞭的語言(描述需求、實現思路、問題點、懷疑-可能什麼原因出錯)

  • 實操能力

    • 增加訓練量

1、字體圖標

Iconfont-阿里巴巴矢量圖庫

https://www.iconfont.cn/

1.1、使用步驟

  •  登錄賬號(阿里賬號、github、微博);
  • 輸入搜索關鍵字,找到對應圖標, 加入購物車;

  • 側邊欄購物側操作 => 添加至項目 => 新添加項目圖標;

  • 進入項目 => 對圖標進行處理 => 下載至本地;

  • 將字體圖標文件夾解壓,改文件夾名稱爲fonts, 放在static目錄下面,在index.html中引入。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <title>meituan</title>
    <link rel="shortcut icon" href="./static/favicon.ico">
    <script src="./static/js/rem.js"></script>
    <!-- 引入字體圖標 -->
    <link rel="stylesheet" href="./static/fonts/iconfont.css">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

1.2、使用

<i class="iconfont 圖標的class名" style="font-size:40px;color:#999;"></i>
// 字體圖標不是圖片,而是一個字體文件,所以可以像css那些的描述字體的內容,去書寫它的樣式!

  

2、在Vue中使用jQuery

cnpm i jquery --save //安裝jQuery

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章