Nuxt.js

Nuxt.jsnuxt.js简单来说是Vue.js的通用框架,最常用的就是SSR(服务端渲染),nuxt.js这个框架,用Vue开发多页面应用,并在服务端完成渲染,可以直接用命令把我们制作的vue项目生成为静态的html。 那么首先要知道什么是客户端渲染与服务端渲染 什么是服务端渲染? 后端先调用数据库,获得数据

Nuxt.js"

nuxt.js简单来说是Vue.js的通用框架,最常用的就是SSR(服务端渲染),nuxt.js这个框架,用Vue开发多页面应用,并在服务端完成渲染,可以直接用命令把我们制作的vue项目生成为静态的html。

那么首先要知道什么是客户端渲染与服务端渲染

什么是服务端渲染?

后端先调用数据库,获得数据之后,将数据何页面元素进行拼接,组合成完整的html页面,在直接返回给浏览器,以用户浏览。

什么是客户端渲染?

数据由浏览器通过ajax动态取得,再通过js将数据填充到demo元素上最终展示到网页中,这样的过程叫客户端渲染。

服务端渲染与客户端渲染那个更优秀?

服务端渲染需要消耗更多的服务端资源(cpu,内存)

客户端渲染可以将静态资源部署到cdn上,实现高并发。

服务端渲染对seo更友好。

 

Nuxt.js是特点(优点):

  • 基于Vue
  • 自动代码分层
  • 服务端渲染
  • 强大的路由功能,支持异步数据
  • 静态文件服务
  • EcmaScript6EcmaScript7的语法支持
  • 打包和压缩JavaScriptCss
  • HTML头部标签管理
  • 本地开发支持热加载
  • 集成ESLint
  • 支持各种样式预编译器SASSLESS等等
  • 支持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

(0)
编程小号编程小号
上一篇 2023-09-01
下一篇 2023-09-01

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注