六十五、完成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小时内删除侵权内容。