vue 一个简单的项目 之一 首页 step 1

首页header 区域开发

首先，在项目中安装一些依赖包。

 以下。主要是安装 stylus ，它帮助css 的编写。

    

    

下面，就可以启动服务了。

使用命令 npm run start.

  首先，我们在src/pages/home 目录下，建立一个新目录 components 把 home 页将要使用的小组件放这儿，然后在这个目录下建立一个单文件组件 Header.vue

  将header export 的名字改下：

   

   然后在 home.vue 中引入并使用 Header 组件：先在第8行 import 进来，然后因为是局部组件，因此要声明组件（第11-13行）。使用如第3行。

     

开始写 header.vue 了。其中style 标签中，lang 表示使用的是stylus，scoped 表示这些样式仅对这个组件适用。

移动端，尺寸单位一般使用rem, 1rem = html font size = 50px （reset.css中）. 因此，我想要设置43px 的话，只要写为  .86rem 即可。

效果：

代码：