nuxt.js使用笔记

最新推荐文章于 2025-10-13 17:01:53 发布

原创

最新推荐文章于 2025-10-13 17:01:53 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#nuxt.js #服务端渲染 #vue #前端

nuxt.js官网: https://zh.nuxtjs.org/guide/routing

Nuxt作用:

为什么要用 : 一个网站分为前台与后台, 现在的web前端开发都是进行组件化开发, 那么传统的vue-cli通过webpack来打包的项目就不利于网络爬虫的seo搜索, 那么网站就不利于推广. 因此可以通过服务端渲染来进行优化, 因此nuxt诞生了.
基本使用介绍 : nuxt是基于vue来编写的服务端渲染框架, 用法和vue-cli3.0有 70%一致

安装

准备工作 :

安装node.js
项目脚手架构建

cmd执行下面的操作, 来启动项目

npx create-nuxt-app <项目名>    //npx在NPM版本5.2.0默认安装了

运行项目结构

npm run dev

目录结构

在这里插入图片描述

.nuxt : 打包的项目
api : 自己封装的ajax文件夹
assets : 存放资源文件(图片, 默认css代码等)
components : 组件文件
layouts : 布局目录, 最好不操作
middleware : 中间件文件
pages : 自己写的路由文件
plugins : 插件配置文件
static : 静态文件
store : vuex文件
nuxt.config.js : 配置文件(vue.config.js相似)

路由

不需要配置route.js文件. 底层会根据pages的目录结构自动生成

目录结构:

pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue

自动生成下面的路由配置

router: {
   
   
  routes: [
    {
   
   
      path: '/users',
      component: 'pages/users.vue',
      children: [
        {
   
   
          path: '',
          component: 'pages/users/index.vue',
          name: 'users'
        },
        {
   
   
          path: ':id',
          component: 'pages/users/_id.vue',
          name: 'users-id'
        }
      ]
    }
  ]
}

使用注意事项 :

当存在多级路由嵌套的时候, 不要使用index.vue文件, 如上在users.vue中使用this.$router.replace(’/main/_id’)界面, 因为index.vue文件就不能再嵌套路由了
注意name属性

路由api使用和vue一模一样 :
- this.$router.push / replace
- this.$route.query
- this.$route.path

嵌套CDN

如 : 在nuxt.config.js中添加了jquery

head: {
   
   
    title: process.env.npm_package_name || '',
    meta: [
      {
   
    charset: 'utf-8' },
      {
   
    name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
   
    hid: 'description', name: 'description', content: process.env