初始化home

柔光的暖阳◎ 2022-05-24 03:07 157阅读 0赞

为了让home页分成好几个组件，可以在home文件夹新建componets文件夹，里新建Header.vue,在home中引入Header.vue

Home.vue文件的内容

<template>  
     <div>  
     <home-header></home-header>  
     </div>  
</template>  
  
  
<script>  
import HomeHeader from './components/Header'  
export default\{  
name:'Home',  
compontents:\{  
HomeHeader  
\}  
\}  
</script>  
  
  
<style>

</style>

header的内容

<template>  
     <div>  
     <div>this is header</div>  
     </div>  
</template>  
  
  
<script>  
export default\{  
name:'HomeHeader'  
\}  
</script>  
  
  
<style>

</style>

在header里export default name ,然后在home.vue里引入header文件，定义组件，在dom里也要定义

在header里定义样式时，加上scoped 可以让里面的clsss 不对其他组件有影响。尺寸把设计图除以2，再转换为rem，1rem=font-size 设计图除以100，得rem

引入字体库

在src /assets/styles/里新建一个iconfont文件夹 把字体文件放到里面，把iconfont.css放在styles文件夹里，然后改一下。css文件夹里的字体引入路径 添加./iconfont/

![20180519144619427][]

删除最下面的代码

在main.js里引入iconfont.css文件

在Header.vue里引入字体符

![20180519144955481][]

定义一些全局样式

在assets/styles/文件下创建varibles.styl文件，定义一个变量$bgColor =\#00bcd4，然后在Header.vue里引入@import ../../../assets/styles/varible.styl然后把颜色替换成变量

![20180519152937541][]

~@，相当于src目录，

因为一些目录是常用的，所以可以自定义一个符来代表。打开webpack.base.conf.js 找到resolve 下的alias 添加

‘styles’:resolve('src/assets/styles'),  把main。js里的文件路径改成styles 报错是因为要 npm run start

[20180519144619427]: /images/20220524/22e0999dd1bc4eadac119c12f1234784.png
[20180519144955481]: /images/20220524/de80e925d2024bd384e4b8bfaee01ee7.png
[20180519152937541]: /images/20220524/e9240d44989f416fbd2ad5f56d0bbb20.png