Vue组件封装

前言

日常Vue开发常用组件有Vant、ElementUi、VuxUI、MintUI等组件库。可是作为一个前端菜鸡常常也会遇到需要自己封装组件的需求。所以在下面会介绍自己封装组件的心得体会。

准备

首先创建一个Vue项目

1.先安装node

菜鸟教程有相关教程 终端输入node -v，如果出现相应的版本号，则说明安装成功。

2.安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安装webpack

npm install webpack

4.安装vue-cli脚手架构建工具

npm install vue-cli -g

安装完成之后输入 vue -V（注意这里是大写的“V”），如果出现相应的版本号，则说明安装成功。

5.初始化项目：

vue init webpack 项目名

填写项目相关信息

下载完成

1.进入项目文件夹

2. npm run dev  //启动项目

然后将没用的文件都删除，创建一个home.vue用来测试组件。

开搞！

在components文件夹下创建文件navBar用来制作顶部导航栏。

首先创建顶部导航栏我们需要将样式写好。

简单的顶部导航栏我们需要这样的效果

首先在图标库找一张返回iocn并使用img引用

在使用插槽定义一个标题

代码插入

  

      

          

      

      

           {{title}}