nuxt.js简单来说是Vue.js的通用框架,最常用的就是SSR(服务端渲染),nuxt.js这个框架,用Vue开发多页面应用,并在服务端完成渲染,可以直接用命令把我们制作的vue项目生成为静态的html。
那么首先要知道什么是客户端渲染与服务端渲染
什么是服务端渲染?
后端先调用数据库,获得数据之后,将数据何页面元素进行拼接,组合成完整的html页面,在直接返回给浏览器,以用户浏览。
什么是客户端渲染?
数据由浏览器通过ajax动态取得,再通过js将数据填充到demo元素上最终展示到网页中,这样的过程叫客户端渲染。
服务端渲染与客户端渲染那个更优秀?
服务端渲染需要消耗更多的服务端资源(cpu,内存)
客户端渲染可以将静态资源部署到cdn上,实现高并发。
服务端渲染对seo更友好。
Nuxt.js是特点(优点):
- 基于
Vue
- 自动代码分层
- 服务端渲染
- 强大的路由功能,支持异步数据
- 静态文件服务
EcmaScript6
和EcmaScript7
的语法支持- 打包和压缩
JavaScript
和Css
HTML
头部标签管理- 本地开发支持热加载
- 集成
ESLint
- 支持各种样式预编译器
SASS
、LESS
等等 - 支持
HTTP/2
推送
Nuxt.js的适用情况?
nuxt.js适合做博客,电影,咨询,新闻这样的需要收索引擎提供流量的项目,如果要做移动端的项目那么大可没必要只用这个框架了。
Vue是如何实现服务端渲染的?
1)安装依赖:
用npm来安装vue-cli这个框架。npm install vue-cli -g
安装完成后可以使用vue -V 来测试是否安装成功。(注意:这里要使用大写的V,小写无效)
2)使用vue安装 nuxt
安装好vue-cli后,就可以使用init命令来初始化Nuxt.js项目。
vue init nuxt/starter
这时候他会在github上下载模版,然后会询问你项目的名称叫什么,作者什么的,这些完全可以根据自己的爱好填写。
3)使用npm install安装依赖包
npm install
这个过程是要等一会的,如果你这个过程安装失败,可以直接诶删除项目中的node_modules文件夹后,重新npm install进行安装。
4)使用npm run dev 启动服务
直到点开目录,看到以下目录结构的介绍。
└─my-nuxt-demo
├─.nuxt // Nuxt自动生成,临时的用于编辑的文件,build
├─assets // 用于组织未编译的静态资源如LESS、SASS或JavaScript,对于不需要通过 Webpack 处理的静态资源文件,可以放置在 static 目录中
├─components // 用于自己编写的Vue组件,比如日历组件、分页组件
├─layouts // 布局目录,用于组织应用的布局组件,不可更改⭐
├─middleware // 用于存放中间件
├─node_modules
├─pages // 用于组织应用的路由及视图,Nuxt.js根据该目录结构自动生成对应的路由配置,文件名不可更改⭐
├─plugins // 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
├─static // 用于存放应用的静态文件,此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候,该目录下的文件会映射至应用的根路径 / 下。文件夹名不可更改。⭐
└─store // 用于组织应用的Vuex 状态管理。文件夹名不可更改。⭐
├─.editorconfig // 开发工具格式配置
├─.eslintrc.js // ESLint的配置文件,用于检查代码格式
├─.gitignore // 配置git忽略文件
├─nuxt.config.js // 用于组织Nuxt.js 应用的个性化配置,以便覆盖默认配置。文件名不可更改。⭐
├─package-lock.json // npm自动生成,用于帮助package的统一设置的,yarn也有相同的操作
├─package.json // npm 包管理配置文件
├─README.md
nuxt的常用配置文件以及配置项
const pkg = require('./package')
module.exports = {
mode: 'universal', // 当前渲染使用模式
head: { // 页面head配置信息
title: pkg.name, // title
meta: [ // meat
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [ // favicon,若引用css不会进行打包处理
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
loading: { color: '#fff' }, // 页面进度条
css: [ // 全局css(会进行webpack打包处理)
'element-ui/lib/theme-chalk/index.css'
],
plugins: [ // 插件
'@/plugins/element-ui'
],
modules: [ // 模块
'@nuxtjs/axios',
],
axios: {},
build: { // 打包
transpile: [/^element-ui/],
extend(config, ctx) { // webpack自定义配置
}
}
}
nuxt的运行命令
{
"scripts": {
// 开发环境
"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
// 打包
"build": "nuxt build",
// 在服务端运行
"start": "cross-env NODE_ENV=production node server/index.js",
// 生成静态页面
"generate": "nuxt generate"
}
}
具体以及详细的介绍可以去一个不知名的大神那里去学习,附上大神的地址https://juejin.im/post/5cc81e1a6fb9a032414f695b
今天的文章Nuxt.js分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/51666.html