深入浅析nuxt.js基于ssh的vue通用框架


Posted in Javascript onMay 21, 2019

Nuxt.js 是一个基于 Vue.js 的通用应用框架。 通过对客户端/服务端基础架构的抽象组织, Nuxt.js 主要关注的是应用的 UI渲染。

SSR ,即服务器渲染,就是在服务器端将对Vue页面进行渲染生成html文件,将html页面传递给浏览器。

Nuxt.js是特点(优点):

  • 基于 Vue.js
  • 自动代码分层
  • 服务端渲染
  • 强大的路由功能,支持异步数据
  • 静态文件服务
  • ES6/ES7 语法支持
  • 打包和压缩 JS 和 CSS
  • HTML头部标签管理
  • 本地开发支持热加载
  • 集成ESLint
  • 支持各种样式预处理器: SASS、LESS、 Stylus等等

vue-cli3如何安装?

yarn global add @vue/cli-init
npm init nuxt-app my-project // 初始化一个nuxt项目

深入浅析nuxt.js基于ssh的vue通用框架

目录结构

深入浅析nuxt.js基于ssh的vue通用框架

全局配置

配置全局样式nuxt.config.js

module.exports={
  css: ['@/assets/css/normailize.css'] // @别名,根目录 
}

配置全局标题和meta

在nuxt.config.js

head: {
  title: 'nuxt项目实战',
  meta: [
   {charset: 'utf-8'},
   {name: 'viewport', content: 'width=device-width, initial-scale=1'},
   {hid: 'description', name: 'description', content: pkg.description}
  ],
  link: [{rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}]
 },

配置全局动效

Nuxt.js 默认使用的过渡效果名称为 page 在全局样式文件 assets/css/main.css 这里假设是main.css里添加一下样式:

.page-enter-active,      //页面进入激活的效果和页面离开的动效
.page-leave-active {
 transition: opacity 1s;
}
.page-enter,         // 页面进入和页面离开激活的效果
.page-leave-active {
 opacity: 0;
}

配置页面单独的动画效果

在全局样式文件 assets/css/main.css 这里假设是main.css里添加一下样式: .后面加页面的单独属性,如test

.test-enter-active,
.test-leave-active {
 transition: all 1s;
 font-size: 12px;
}
.test-enter,
.test-leave-active {
 opacity: 0;
 font-size: 40px;
}

然后我们将页面组件中的 transition 属性的值设置为 test 即可:

export default {
 transition: 'test'
}

配置全局loading

module.exports = {
  loading: {color: '#fff'},
}

路由

要在页面之间使用路由,我们建议使用 标签。nuxt会自动在.nuxt生成router.js,用这个标签跟vue-router的使用基本一致。不需要额外引入vue-router,且根据我们的目录名称来处理的,不需要我们在router.js配置

基础路由

<nuxt-link :to="{name:'index'}">Home</nuxt-link> //可以根据to,path跳转,同样可以传参params,query
 <nuxt-link :to="{name:'about',query:{id:123}}">about</nuxt-link>

动态路由

在 Nuxt.js 里面定义带参数的动态路由,需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。

pages/
--| news/
-----| _id.vue
-----| index.vue
在index.vue中要根据不同的id跳到新闻详情页,这里有2种跳转方式,通过path和name
<nuxt-link :to="{path:'/news/123'}">news-1</nuxt-link>
<nuxt-link :to="{name:'news-id',params:{newdetail:'fff'}}">news-32</nuxt-link>
在_id.vue中可以接收到参数{{$route.params.newdetail}}

路由参数效验

export default {
 validate ({ params,query}){
  // 必须是number类型
  return /^\d+$/.test(params.id)
 }
}

嵌套路由

创建内嵌子路由,你需要添加一个 Vue 文件,同时添加一个与该文件同名的目录用来存放子视图组件。

在父组件(.vue文件) 内增加 用于显示子视图内容

动态嵌套路由,不多见,原理一致

中间件

中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。每一个中间件应放置在 middleware/ 目录。文件名的名称将成为中间件名称(middleware/auth.js将成为 auth 中间件)。在 nuxt.config.js 、 layouts 或者 pages 中使用中间件: eg:在nuxt.config.js

module.exports = {
  router:{
  middleware: 'check-auth'
 }
}

总结

以上所述是小编给大家介绍的nuxt.js基于ssh的vue通用框架,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JS判断是否为数字,是否为整数,是否为浮点数的代码
Apr 24 Javascript
javascript使用activex控件的代码
Jan 27 Javascript
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
jquery序列化表单以及回调函数的使用示例
Jul 02 Javascript
关于JS中prototype的理解
Sep 07 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
jQuery  ready方法实现原理详解
Oct 19 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
用node.js写一个jenkins发版脚本
May 21 #Javascript
vue-router源码之history类的浅析
May 21 #Javascript
vue 地图可视化 maptalks 篇实例代码详解
May 21 #Javascript
vue 中使用 watch 出现了如下的报错的原因分析
May 21 #Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 #Javascript
vue+element创建动态的form表单及动态生成表格的行和列
May 20 #Javascript
Node 搭建一个静态资源服务器的实现
May 20 #Javascript
You might like
PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】
2017/06/21 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
jQ处理xml文件和xml字符串的方法(详解)
2016/11/22 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
Python3列表List入门知识附实例
2020/02/09 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
纽约手袋品牌:KARA
2018/03/18 全球购物
PHP如何与mysql建立链接
2013/05/05 面试题
2014新年寄语
2014/01/20 职场文书
小学毕业典礼主持词
2014/03/27 职场文书
小露珠教学反思
2014/04/30 职场文书
民事赔偿协议书
2014/11/02 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
会议室使用管理制度
2015/08/06 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书
WordPress多语言翻译插件 - WPML使用教程
2021/04/01 PHP
pandas中DataFrame检测重复值的实现
2021/05/26 Python
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL