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

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？

yanglobal add @ vue/CLI-init NPM init nuxt-appmy-project//初始化一个nuxt项目

目录结构

全局配置

配置全局样式nuxt.config.js

模块。导出={ CSS :[' @/assets/CSS/normalize . CSS ']//@别名，根目录}配置全局标题和元

At nuxt.config.js

head : { title : ' nuxt project实战'，meta :[{ charset : ' utf-8 ' }，{name:' viewport '，content : ' width=device-width，initial-scale=1'}，{hid:' description '，name:' description '，content:pkg。描述}]，link: [{rel3360' icon '，type:' image/x-icon '，href :'/favicon.ico'}]}

默认情况下，Nuxt.js使用的过渡效果的名称是page。在全局样式文件assets/css/main.css这里添加一个样式，假设它是main.css:页面-进入-激活，//页面进入激活效果和页面退出激活效果。页面-离开-活动{ transition : opacity1s}.page-enter，//页面进入和页面退出激活的效果。页面-保持活动状态{ opa city 3360 0；}为页面配置单独的动画效果

在全局样式文件assets/css/main.css中添加一个样式，该样式假定为main.css:后面跟一个单独的页面属性，比如test。测试-输入-激活。测试-离开-激活{ transition:全1；font-size : 12px；}.测试输入。测试-离开-活动{ opa city 3360 0；font-size : 40px；}然后我们可以在要测试的页面组件中设置transition属性值：

导出默认{transition :' test'}配置全局加载

模块。导出={ loading: { color: ' # fff ' }，路由

要在页面之间使用路由，我们建议使用标签。Nuxt将在中自动生成router.js。nuxt，并且这个标签的使用基本上与vue-router相同。不需要引入vue-router，按照我们的目录名来处理，所以不需要在router.js中配置

基本路由

nuxt-link : to=' { name : ' index ' } ' home/nuxt-link//可以根据to to和path跳转，也可以传递params，查询nuxt-link : to=' { name : ' about '，查询： {ID :123。

要用Nuxt.js中的参数定义动态路由，需要创建以下划线为前缀的相应Vue文件或目录。

Pages/-| news/-| _ id。索引中的vue-| index.vue。vue，你应该根据不同的id跳转到新闻详情页。这里有两种跳法。Path和name nuxt-link : to=' { path : '/news/123 ' } ' news-1/nuxt-link nuxt-link : to=' { name : ' news-id '，params 3360 { new detail : ' fff ' } ' news-32/nuxt-link可以在_ id.vue中接收参数{{$route.params.newdetail}}。

导出默认值{validate ({ params，query}){ //必须是数字类型return/\ d $/。test (params.id)}}嵌套路由

要创建嵌入的子路径，需要添加一个Vue文件和一个与该文件同名的目录来存储子视图组件。

添加用于在父组件中显示子视图的内容()。vue文件)

动态嵌套路由很少见，原理相同

中间件

中间件允许您定义一个自定义函数，以便在呈现一个页面或一组页面之前运行。每个中间件都应该放在中间件/目录中。文件名的名称将成为中间件名称(中间件/auth.js将成为auth中间件)。在nuxt.config.js、布局或页面中使用中间件： eg:

module.exports={ router: {中间件：' check-auth'}}摘要

以上是边肖介绍的基于ssh的nuxt.js的总体框架。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！