Nuxt.js实战分析

这篇文章主要为大家详细介绍了Nuxt.js实战分析，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

一、为什么选择Nuxt.js

多数是基于webpack构建的项目，编译出来的html文件，资源文件都被打包到js中，以下图404页面代码为例。从代码中可以看出，这样的页面是不利于 搜索引擎优化(SEO, Search Engine Optimization) ，并且 内容到达时间(time-to-content) （或称之为首屏渲染时长）也有很大的优化空间。为了解决以上问题，引入了 Nuxt.js 框架。

vue官网对于Nuxt.js也是很推荐的，除此之外，Nuxt.js的开发者积极活跃，版本迭代迅速。经过一系列rc版本后，终于在1月9日发布了 v1.0.0 正式版本！

【q1010.com温馨提示：图片暂缺】

图1. 使用webpack构建的HTML（代码已格式化）

【q1010.com温馨提示：图片暂缺】

图2. 使用 Nuxt.js 构建的HTML（代码已格式化）

二、Nuxt.js 简介

Nuxt.js 是一个基于 Vue.js 的通用应用框架，它预设了利用 Vue.js 开发 服务端渲染（SSR, Server Side Render） 的应用所需要的各种配置，同时也可以一键生成静态站点。

作为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。区别于其他 vue SSR 框架，Nuxt.js 有以下比较明显的特性。

1. 自动代码分层
2. 强大的路由功能，支持异步数据（路由无需额外配置）
3. HTML头部标签管理（依赖 vue-meta 实现）
4. 内置 webpack 配置，无需额外配置

三、项目实战1、项目创建

官方提供了基于 vue-cli 脚手架工具，常用的有如下三个，更多脚手架工具可以查看nuxt-community 。本项目使用的是 express-template。

代码如下：

vue init nuxt-community/starter-template <project-name>

vue init nuxt-community/koa-template <project-name>
 
vue init nuxt-community/express-template <project-name>

2、开发

1）目录结构

代码如下：

├─assets   资源目录，未编译的静态资源如less、js
├─components  组件目录
├─layouts  布局目录
├─mock   mock数据
├─node_modules  
├─pages   页面目录
 ├─index.vue
 ├─....   
├─plugins  插件
├─server   express服务
├─static   静态文件目录
├─store   vuex store
├─utils   工具方法

2）配置

Nuxt.js 默认的配置涵盖了大部分使用情形，也可通过修改 nuxt.config.js 来覆盖默认配置。

代码如下：

// nuxt.config.js 文件配置
const path = require('path')

module.exports = {
 // Headers of the page
 head: {
 title: '默认共用title',
 meta: [
 { charset: 'utf-8' },
 { 'http-equiv': 'pragma', content: 'no-cache' },
 { 'http-equiv': 'cache-control', content: 'no-cache' },
 { 'http-equiv': 'expires', content: '0' },
 { content: 'telephone=no', name: 'format-detection' }
 ],
 // html head 中创建 script 标签
 script: [
 { innerHTML: require('./assets/js/flexible_nuxt'), type: 'text/javascript', charset: 'utf-8'}
 ],
 // 不对<script>标签中内容做转义处理
 __dangerouslyDisableSanitizers: ['script']
 },
 // Global CSS
 css: ['~/assets/css/reset.css', '~/assets/css/main.less'],
 // Global env
 env: {
 __ENV: process.env.__ENV
 },
 build: {
 vendor: ['axios'],
 postcss: [
 require('postcss-px2rem')({
 remUnit: 75
 })
 ],
 extend (config, ctx) {
 if (ctx.isClient) {
 // 拓展 webpack 配置
 config.entry['polyfill'] = ['babel-polyfill']
 config.module.rules.push({
  enforce: 'pre',
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  exclude: /(node_modules)/
 })
 // 添加 alias 配置
 Object.assign(config.resolve.alias, {
  'utils': path.resolve(__dirname, 'utils')
 })
 }
 }
 },
 plugins: [{src: '~plugins/toast', ssr: false}, {src: '~plugins/dialog', ssr: false}]
}

 

HTML头部标签管理：

 

Nuxt.js 通过 vue-meta 实现头部标签管理，在 nuxt.config.js 中的 head 配置。所有的页面都会走这个配置，如果想要修改某一页面的title，可以在 pages/**.vue 文件下，添加如下配置，这时该页面的标题就变成了“收车费”，其余页面还保持原有标题不变。

【q1010.com温馨提示：图片暂缺】

在config header配置中， __dangerouslyDisableSanitizers: ['script'] 主要是为了不对<script>标签中内容做转义处理。看下面的例子

本文来自：http://www.q1010.com/184/4796-0.html

注：关于Nuxt.js实战分析的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js

您可能感兴趣的文章

• 分析VUE-地区选择器(V-Distpicker)组件使用心得
• 使用Vue开发一个实时性时间转换指令
• VueJs监听window.resize方法示例
• vue嵌套路由与404重定向实现方法分析
• 浅谈Vue 数据响应式原理
• vue2.0实现移动端的输入框实时检索更新列表功能
• webstorm和.vue中es6语法报错的解决方法
• 基于vue-element组件实现音乐播放器功能
• vue自定义指令directive实例分析
• vue 注册组件的使用分析