nuxt.js 初步接触

zlevai
2,194 阅读3分钟

nuxt.js 入坑学习

1.nuxt.js简介

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

2.为什么选择Nuxt.js？

解决了以下问题： （1）SEO。搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息，使网站无法在搜索引擎中被用户搜索到。 （2）用户体验（首屏白屏）。大型webApp打包之后的js会很庞大，于是就有了按模块加载，像require.js一样，异步请求。webpack盛行，就变成了代码分割。即便如此，受制于用户设备，页面初次渲染还是有可能很慢，白屏等待时间太长，对日益挑剔的用户群体来说，无法接受。

3.搭建开发项目目录结构

安装 - Nuxt.js

# 通过vue-cli安装模板文件生成项目结构目录
vue init nuxt-community/starter-template <project-name>

生成的结构目录如下：

3.1 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。

3.2 components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性

3.3 layouts 用于组织应用的布局组件。

3.4 middleware 目录用于存放应用的中间件。

3.5 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。

3.6 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。

3.7 static` 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路

3.8 store 目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。

3.9 nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置

3.10 package.json 文件用于描述应用的依赖关系和对外暴露的脚本接口。

4.项目初始化，引入全局css样式和element-ui

# 1.在nuxt.config.js文件中配置如下：
module.exports = {
  css: [
    '~/static/styles/public.css',
    'element-ui/lib/theme-chalk/index.css'
  ],
	plugins: [
    '@/plugins/element-ui'
  ]
}

# 2.在plugins目录下新建element-ui.js文件：
import Vue from 'vue'
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'
export default () => {
  Vue.use(Element, { locale })
}

5.定制化默认的 html 模板，只需要在应用根目录下创建一个 app.html 的文件。

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
      <meta http-equiv="Cache-Control" content="no-siteapp">
      <meta name="renderer" content="webkit">
      {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

6.设置404页面

在layouts目录下新建404.vue组件，在error.vue组件中通过layout属性指定错误的页面布局结构，如图：

7.通过 npm run generate 生成静态文件

注意：如果在nuxt.config.js 文件中的build下没有设置publicPath，通过npm run generate 打包生成后的文件会报如下错误：

解决方法，设置publicPath,我本地开的服务是(http://127.0.0.1:5500) 所以我在nuxt.config.js中设置如下： 这样通过访问http://127.0.0.1:5500/dist/ 可以访问到我们的首页index.html

build: {
	publicPath: 'http://127.0.0.1:5500/dist/',
	}
avatar
文章
阅读
粉丝