页面的构建,一般是美工先制作效果图片,然后切图成html,我们拿到了html,先分析结构,以便能拆分成组件,vue项目一个非常鲜明的特点,就是组件化开发,最后,实现相应的业务逻辑,比如通过接口获取数据等。
以网站首页来分析,一般分为头部,中间内容部分,尾部。按照这个结构,新建存放对应内容的文件夹,来创建存放组件。
组件开发时,需要注意的是:
1、组件中的样式,图片路径要正确
2、vue项目是使用的less样式,静态的html中都是css样式,浏览器识别的也是css样式,不识别less样式,所以需要安装 less 、less-loader 依赖包,并在 .vue
文件中,style
节点上加上lang="less"
属性,即可直接使用less,浏览器才能识别
安装less 和less-loader ,,如果不加版本号,默认安装最新的版本,有时版本过高,会报错,一般安装时,会指定版本,这里采用5版本的
命令:npm install --save less less-loader@5
vue中的组件步骤:
(1)创建组件
(2)引入组件样式,开发组件
(3)实现组件中的相应业务逻辑,比如,调用接口获取数据等等
(4)使用组件步骤:
【1】通过 import 引入组件,
比如引入当前目录下components/Header
【2】注册组件 ,通过components 注册组件(只有注册完后,组件才能使用)
【3】使用组件
示例:
<template>
<div id="app">
<!-- 3、使用组件header -->
<Header></Header>
</div>
</template>
<script>
//1、引入vue 引入当前目录下components/Header
import Header from "./components/Header";
export default {
name: "App",
components: {
//2、注册组件
Header,
},
};
</script>