三、html页面构建Vue项目步骤思路

页面的构建，一般是美工先制作效果图片，然后切图成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>

三、html页面构建Vue项目步骤思路

猜你喜欢