nuxt.js初识

迷___途
1,532 阅读1分钟

欢迎各位观众老爷来提bug

需求

闲来无事，抽空玩玩，以备不时之需(其实是考虑了下官网的seo以及首页渲染太慢问题)

1.不使用脚手架工具新建项目（因为官网项目已经做好了）

下面跟着我按顺序走

1.日常三步走

1.mkdir xxxx
2.cd xxxx
3.touch package.json

2.编写package.json文件

//一定是双引号，别问为什么
{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt" // 之后可以通过yarn dev来运行nuxt
  }
}

3.安装nuxt依赖

在命令行里运行yarn add nuxt --save

4.创建pages目录

nuxt会根据pages目录中所有的*.vue文件生成对应的路由配置

mkdir  pages
cd pages
touch index.vue

index.vue文件
<template>
  <div>nuxt is so cool</div>   
</template>

5.启动项目

yarn dev 可以在3000端口查看你启动的项目

学到这里反正我是?@@?!@??!!X@#@ !?!$!

因为我压根不知道项目入口在哪里，如何写自己的项目。下面来换一种模式学习（不代表前面的无效）

2.使用脚手架来创建项目

yarn create nuxt-app xxxx然后就是一堆选择（看个人需求）

  • 1.服务器框架
  • 2.UI框架
  • 3.测试框架
  • 4.选择你想要的Nuxt模式 (Universal or SPA)
  • 5.添加 axios module 以轻松地将HTTP请求发送到您的应用程序中。
  • 6.添加 EsLint 以在保存时代码规范和错误检查您的代码。
  • 7.添加 Prettier 以在保存时格式化/美化您的代码。

然后跟着提示 就可以在3000端口看到效果了

cd xxxx
yarn dev

这就是脚手架创建的项目结构了

脚手架创建的项目结构

对比之前从零创建的项目结构，可以发现少了不少目录，下面来讲讲这些目录的作用（告诉你如何开始做项目）

  • assets资源目录:用于组织未编译的静态资源如 LESS、SASS 或 JavaScript

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

  • layout布局目录:用于组织应用的布局组件(可以当作是client中的app.vue，解决body导致的浏览器默认margin问题)

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

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

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

再提一下自己创建的几个文件夹：

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

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

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

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

  • 小tips：别名：

~ 或 @ ：代表srcDir,例如：如果你需要引入assets 或者 static 目录, 使用 ~/assets/your_image.png 和 ~/static/your_image.png方式。

总结

  • pages文件夹下的文件就是你的页面，路由会根据pages中的结构自动生成（所以最好保持路由与文件名相同）
  • nuxt.config.js文件里的配置很重要 ➡️ 官网学习链接
  • nuxt中没有created和mounted,官方扩展了asyncData方法来初始化数据 ➡️ 官网学习链接

下面是一些学习过程中遇到的问题

1.nuxtjs引入element-io

参考文章--最清晰简单的 Nuxt.js 使用 element-ui 教程

  • 1.在命令行中yarn add element-ui -S （个人更喜欢yarn）
  • 2.在 plugins 文件夹下新建 element-ui.js 文件
1. import Vue from 'vue'
2. import Element from 'element-ui'
3. Vue.use(Element);
  • 3.配置 nuxt.config.js（重点,重点,重点)
module.exports = {
  ...
  /*
  ** Global CSS
  */
  css: [
    {src:'element-ui/lib/theme-chalk/index.css'}    // 1.在 css 中配置 element-ui 的 css 位置
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    {src:'~plugins/element-ui', ssr: false}    // 2.在 plugins 中配置刚刚创建好的 plugin
  ],
  /*
  ** Build configuration
  */
  build: {
    ...
    vendor: ['element-ui']    // 3.此处配置 build 时带着element-ui
  }
}

2. 上面是全局引入，现在说下按需加载

1.首先安装依赖 yarn add -D babel-plugin-component 2.在 plugins 文件夹下修改 element-ui.js 文件

import Vue from 'vue'
import {Message} from 'element-ui'  // 由于我只需要Message组件，所以我只用了它
Vue.prototype.$message = Message

import {Button} from 'element-ui'  // 如果要Button组件，可以这么用
Vue.use(Button)

3.修改配置 nuxt.config.js

module.exports = {
    css: [
        // {src:'element-ui/lib/theme-chalk/index.css'}    // 1.在 css 中配置 element-ui 的 css 位置
        注释此处的css配置（重点注意️）
    ],
  build: {
    vendor: ['element-ui'],
    babel: {
      plugins: [
        [
          'component',
          { libraryName: 'element-ui', styleLibraryName: 'theme-chalk' }
        ]
      ]
    }
  },
}

3.nuxtjs无法区分环境的问题

参考文章

4.ReferenceError: window is not defined

原因

服务器中并不存在window，所以需要做一个判断

if(typeof window == undefined){
    // dosomething
}

5.一篇不错的文章

Nuxt开发经验分享

暂时就写这么点，以后有相关的收获会持续更新·······

avatar
文章
阅读
粉丝