六十五、完成Vue項目去哪兒網App首頁開發（來源：慕課網）

@Author：Runsen

@Date：2020/10/21

寫在前面：我是「Runsen」，熱愛技術、熱愛開源、熱愛編程。技術是開源的、知識是共享的。大四棄算法轉前端，需要每天的日積月累， 每天都要加油?。?！

今天將完成Vue項目去哪兒網App首頁開發，下面是在本次慕課網完成Vue項目去哪兒網App首頁開發的總結和感受。

文章目錄

全局安裝stylus和stylus-loader

創建iconfont項目

Home.vue

Header.vue

配置webpack，對項目進行維護

全局安裝stylus和stylus-loader

在Vue中有三種CSS預處理，現在用的最多的是stylus。

下載安裝stylus、stylus-loader包。

npm install stylus@0.54.5 --save npm install stylus-loader@3.0.1 --save

1

2

在package.json中就可以stylus和stylus-loader 對應的版本號。

在vscode的編寫stylus，最好安裝stylues的插件

創建iconfont項目

在阿里巴巴圖標官方，創建iconfont項目，并添加所需的圖標。下載到本地。

將對應的文件復制到對應的項目，并修改iconfont.css文件對應的路徑。

Home.vue

在Home.vue引用HomeHeader ，HomeHeader 對應的

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

Header.vue

Header.vue就是首頁開發的組件，將對應的圖標引用。

在styles中1rem等于100px。px像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。

對于需要適配各種移動設備，使用rem，因此前端開發基本用rem。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

配置webpack，對項目進行維護

在webpack.base.conf.js中配置'styles': resolve('src/assets/styles'),。只要在import中出現了styles，代表就是src/assets/styles路徑

具體實現效果如下。

參考課程：慕課網Vue2.5->2.6->3.0 開發去哪兒網App 從零基礎入門到實戰項目開發

Vue 移動APP

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。