nuxt引入组件和公共样式的操作


Posted in Javascript onNovember 05, 2020

1,引入组件

在components目录创建组件,在页面中引入组件

例如引入公共导航栏

创建组件components/Nav.vue

nuxt引入组件和公共样式的操作

引入组件layouts/default.vue

nuxt引入组件和公共样式的操作

2,引入公共样式

assets/css/common.css

在nuxt.config.js中引入

nuxt引入组件和公共样式的操作

若引入less或者sass:

nuxt引入组件和公共样式的操作

补充知识:在nuxt项目中使用component组件

编写组件页面

1.在components下新建一个新建组件页面,如下所示

nuxt引入组件和公共样式的操作

2.新建完成之后初始页面的代码如下所示:

nuxt引入组件和公共样式的操作

3.下面从element-ui上找一个顶部导航菜单写到组件页面。

<el-menu
 :default-active="activeIndex2"
 class="el-menu-demo"
 mode="horizontal"
 @select="handleSelect"
 background-color="#545c64"
 text-color="#fff"
 active-text-color="#ffd04b">
 <el-menu-item index="1">处理中心</el-menu-item>
 <el-submenu index="2">
  <template slot="title">我的工作台</template>
  <el-menu-item index="2-1">选项1</el-menu-item>
  <el-menu-item index="2-2">选项2</el-menu-item>
  <el-menu-item index="2-3">选项3</el-menu-item>
  <el-submenu index="2-4">
   <template slot="title">选项4</template>
   <el-menu-item index="2-4-1">选项1</el-menu-item>
   <el-menu-item index="2-4-2">选项2</el-menu-item>
   <el-menu-item index="2-4-3">选项3</el-menu-item>
  </el-submenu>
 </el-submenu>
 <el-menu-item index="3" disabled>消息中心</el-menu-item>
 <el-menu-item index="4"><a href="https://www.ele.me" rel="external nofollow" target="_blank">订单管理</a></el-menu-item>
</el-menu>

nuxt引入组件和公共样式的操作

使用组件

1.引入组件

import MinorTopMenu from '~/components/MinorTopMenu.vue'

2.注册组件

components: {
 MinorTopMenu
}

3.使用组件

<MinorTopMenu></MinorTopMenu>

4.页面代码截图

nuxt引入组件和公共样式的操作

测试

打开页面,如下所示,说明组件使用成功

nuxt引入组件和公共样式的操作

以上这篇nuxt引入组件和公共样式的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
从零学jquery之如何使用回调函数
May 16 Javascript
js变量、作用域及内存详解
Sep 23 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
Apr 24 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
Jun 28 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 Javascript
详解puppeteer使用代理
Dec 27 Javascript
小程序实现长按保存图片的方法
Dec 31 Javascript
node.js制作一个简单的登录拦截器
Feb 10 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 #jQuery
nuxt 实现在其它js文件中使用store的方式
Nov 05 #Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 #Javascript
vue实现点击出现操作弹出框的示例
Nov 05 #Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 #Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 #Javascript
前端vue如何使用高德地图
Nov 05 #Javascript
You might like
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
php bootstrap实现简单登录
2016/03/08 PHP
js版本A*寻路算法
2006/12/22 Javascript
动态表格Table类的实现
2009/08/26 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
2011/07/11 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
详解JavaScript的变量
2019/04/04 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
Python入门_浅谈数据结构的4种基本类型
2017/05/16 Python
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
详解Python正则表达式re模块
2019/03/19 Python
利用python实现AR教程
2019/11/20 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
python全局变量引用与修改过程解析
2020/01/07 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
论文指导教师评语
2014/04/28 职场文书
征兵宣传标语
2014/06/20 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书