Nust

新建项目

官网文档

在跑项目的时候不能创建项目

新建项目流程

1
2
3
4
5
6
7
8
9
// 步骤一： 三种新建项目的方式
    1. npx nuxi@latest init <project-name>  (采用，不行就多尝试几次,查官网)
    2. pnpm dlx nuxi@latest init <project-name>
    3. npm install -g nuxi && nuxi init 项目名称
// 步骤二：
	1. cd <project-name>
	2. npm i
	3. npm run dev -- -o

创建项目失败

  1. 检查node版本。用nvm进行版本切换 nvm list; nvm use <node version>；node版本需要大于18.0.0
  2. ping raw.githubusercontent.com
    • ping不通，window下修改 C:\Windows\System32\drivers\etc\hosts ；管理员权限打开，在最后添加 185.199.108.133 raw.githubusercontent.com
    • ping不同，MAC在 /etc/hosts文件下修改相同内容

项目目录

大纲

Nuxt项目目录

package.json

1
2
3
4
5
6
7
8
"scripts": {
  "build": "nuxt build",  // 打包正式版本 -> nitro -> .output
  "dev": "nuxt dev",		// 开发环境运行
  "generate": "nuxt generate",//打包正式版本项目，但是会提前预渲染每个路由->nuxt build --prerender
  "preview": "nuxt preview", // 打包项目之后的本地阅览效果
  "postinstall": "nuxt prepare" //npm生命周期钩子，当执行完npm install 之后会自动执行 nuxt prepare
    //nuxt prepare 生成.nuxt和ts类型等等
},

nuxt.config.ts

  1. 辅助函数，宏函数，不需要导包

  2. export default defineNuxtConfig({
 // 配置运行时依赖   
  runtimeConfig: {
    // The private keys which are only available server-side
    apiSecret: '123',
    // Keys within public are also exposed client-side
    public: {
      apiBase: '/api'
    }
  },
      // app 配置 有利于seo,添加外部资源，类似html中meta的一些描述
  app: {
    head: {
      title: "猪宝",
      charset: "UTF-8",
      viewport: "width=device-width, initial-sacle=1.0",
      meta: [
        {
          name:"keywords",
          content: "猫咪"
        },{
          name: "description",
          content: "maomao"
        }
      ],
      link: [
        {
          rel: "icon",
          href: "favicon.ico",
          type: ""
        }
      ],
      style: [],
      script: []
    },
  },
})


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
       
    3. ![app配置完效果](https://blog-images-1310572444.cos.ap-guangzhou.myqcloud.com/image-20231225210311255.png)



    **app.vue**

    1. 应用文件入口
    2. `<NuxtWelcome />` 不需要导入直接使用
    3. 定义页面布局 Layout 或 自定义布局，如： NuxtLayout
    4. 定义路由占位， 如 ： NuxtPage
    5. 编写全局样式
    6. 全局监听路由，路由守卫……（router不需要导包直接使用即可）
    7. ```javascript
       // 判断代码执行环境 （app.vue即打包到client也会打包到server）
       if(process.server) {
         console.log("运行在 server");
       }
       if(process.client) {
         console.log("运行在client");
       }
       if( typeof window === 'object') {
         console.log("运行在client");
       }
       
       // 动态的改app所有的页面添加head的内容，优先级高于app
       useHead({
         title: 'app useHead',
         meta: [
           {
             name: "desc",
             content: "1111111111"
           }
         ]
       })
       
       // spa 切换渲染模式
       ssr:false

.env

  1. 不参与打包，只有在运行时才加载，重复变量优先级高于 nuxt.config.js

  2. 参数格式是固定的：NUXT_API_SECRET='api_secret_token'

  3. 不区分环境，这里写的变量都会添加到process.env.xxx

  4. # This will override the value of apiSecret ,优先级高于nust.config.js
NUXT_API_SECRET='api_secret_token'
NUXT_PUBLIC_BASE_URL = 'http://localhost'
# 修改端口 也可以在脚本中修改
PORT=9090

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18



    **app.config.ts**

    1. 一般用来存放公共变量，在app.vue中使用不需要导入，变量也不会被 **.env中的重写**

    2. ```typescript
       // 一般存放公共变量
       export default defineAppConfig({
         title: 'Hello Nuxt',
         theme: {
           dark: true,
           colors: {
             primary: '#ff0000'
           }
         }
       })

component

ClinetOnly

  1. <!-- 只在客户端渲染，浏览器ssr渲染返回的preview是没有ClientOnly包裹的相关内容的	 -->
<!-- fallback-tag ClientOnly在client挂载前显示-->
<ClientOnly fallback-tag="h3" fallback="loading……">
    我只会在客户端进行渲染
</ClientOnly>

<!-- This renders the "span" element on the server side -->
<ClientOnly fallbackTag="span">
  <!-- this component will only be rendered on client side -->
  <Comments />
 <!-- 使用插槽会让他在服务器端渲染 -->   
  <template #fallback>
    <!-- this will be rendered on server side -->
    <p>Loading comments...</p>
  </template>
</ClientOnly>



    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36



    **NuxtPage**

    1. 类似Vue中的 **router-view** ，该组件只会渲染当前挂载的对象或页面





    # 样式

    ## 全局样式

    **编写全局样式步骤：**

    1. 编写全局样式方法1:
       * 在 `app.vue` 文件中直接编写样式。 `app.vue` 是入口文件。



    2. 在assets文件夹中编写全局样式， 如`global.sass`

       * 接着在 `nuxt.config`中的css选项进行配置

       * 执行 `npm i -D sass`

       * *// 在 nuxt全局引入之后不需要单独引入* *// `@use "~/assets/styles/global.scss`";*

       * ```typescript
         export default defineNuxtConfig({
           devtools: { enabled: true },
           // 配置CSS全局样式
           css: ['@/assets/styles/main.css', '@/assets/styles/global.scss']
         })

  2. 变量代替全局样式值

  • // src/assets/styles/variable.scss
$primary: #49240F;
$secondary: #E4A79D;

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    * ```typescript
      // nuxt.config.ts
      export default defineNuxtConfig({
        vite: {
          css: {
            preprocessorOptions: {
              scss: {
             		// 他会合并到global中，并在global中使用     
                additionalData: '@use "~/assets/_colors.scss" as *;'
              }
            }
          }
        }
      })

public | assets

public

  1. 访问 src/public 中的文件直接就使用 /xxx 即可，不需要在使用相对定位和绝对定位
  2. <img src="/favicon.ico" alt="" />

assets

  1. @ | ~ 表示的是当前的根路径
  2. 支持 base64 格式
  3. <img src="~/assets/images/default1.png" alt="" />

字体图标

使用Npm发布的样式表

  1. npm install animate.css

  2. Reference

    • pages 、 layout、components

    • <script>
import 'animate.css'
</script>

<style>
@import url("animate.css");
</style>

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10

      ***

      - **nuxt.config.ts**

      - ```typescript
        export default defineNuxtConfig({
          css: ['animate.css']
        })

在public/font文件夹中下载字体

page

new Page

  1. 创建页面 /src/page/xxx.vue | 控制台输入npx nuxi add page xxx | xxx/xxx
  2. 在 app.vue 中写 <NuxtPage></NuxtPage> [类似router-view，起占位作用]
  3. 不需要配置router ，nuxt内部会根据page里面的东西来配置路由
  4. 要想实现按钮点击可使用 <NuxtLink to="/xxx"> xxx Page</NuxtLink>

属性：

  1. to: 实现路由的跳转 （String | {} | link）；to === herf
  2. target： target="_blank" 新页面在外部打开
  3. active-class：
  4. replace：

编程导航

  1. 轻松实现 动态路由跳转

  2. 不利于SEO

  3. <NuxtLink @click="goToCategory"><button>Category Page</button></NuxtLink>

<script setup>

    function goToCategory() {
      return navigateTo('/category')
    }
</script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66



    ### useRouter | this.$router

    1. 路由守卫写在 **app.vue**





    # Router

    ## 动态路由

    **注意：**

    1. 动态路由和 index.vue可以同时存在
    2. 动态路由就是在page下面的页面中写一个 `[id].vue` 访问页面的时候可以在网址上加上 `/xxx` 即访问到该动态路由
    3. useRoute 是拿到路由的配置；useRouter是拿到路由的对象
    4. **有挺多方法的，具体详见官方文档**
    5. `[...slugn].vue`  如果访问路径不存在就会访问当前这个页面 ，捕获所有不匹配路由。



    ## 嵌套路由

    1. 嵌套路由也是根据目录结构和文件名称自动生成的
    2. **编写嵌套路由步骤：**
       - 创建一个一级路由，如parent.vue
       - 创建一个与一级路由同名同级的文件夹如：parent。
       - 在parent文件夹下，创建一个嵌套的二级路由。如parent/child.vue
       - **需要在parent.vue文件中添加NuxtPage进行路由占位**

    ## 路由中间件

    1. [Nuxt路由中间件文档位置](https://nuxt.com/docs/guide/directory-structure/middleware)
    1. Nuxt提供了一个可定制的**路由中间件**， 用来 **监听路由的导航，包括：局部和全局监听** （支持在server和client执行）
    1. 两端都会执行,但是server端在重新请求触发. client会重新执行
    1. 在 **src/middleware**, 这个时固定死的

    ***

    **匿名或内联路由中间件**

    1. 在页面中使用 **definePageMate** 函数定义，可监听局部路由。当注册多个中间件时，会按照注册顺序来执行。在需要的页面写即可

       - ```typescript
           definePageMeta({
             // 路由的中间件
             middleware: [
               function(to, from) {
                 console.log("from", from);
                 console.log("to", to);
                   // 如果return 不是 ”“ | null | 无返回语句，那么不会执行下面的中间件
               },
               // 第二个中间件
                function(to, from) {
                 // console.log("from", from);
                 // console.log("to", to);
                 console.log("第er个中间件");
               },
            // 命名中间件     
                  'auth',
             ]
           })

命名的中间件

  1. 中间件名称即当前文件的名字

全局路由中间件

  1. 优先级最高，多个页面都会自动添加和服用。譬如登录页面
  2. xxx.global.ts 他会自动添加到所有页面上

路由验证 | Validate

  1. 路由验证官方文档位置
  2. 路由验证失败，错误处理方案
  3. Nuxt支持 对每个页面路由进行验证,， 我们可以通过 definePageMate中的validate属性来对路由进行验证。
前端
#Nust #SSR
Nust
http://example.com/2023/12/25/Nust/
作者
Caoqin
发布于
2023年12月25日
许可协议