Eddiehza's Blog

Appearance

React ​

前记

在做公司的官方网站，也是第一次接触到nuxt。众所周知，vue由于挂载在#app的div上，搜索引擎在爬网站的时候什么都爬不到，所以需要用到ssr。nuxt优化了这个方面。

特点 ​

  没有vue-router。使用规定式的路由。

  • public放静态资源
  • assets放编译的时候需要用到的资源，例如放一个global.css
  • components和vue中的组件一个意思，注意目录的起名简洁。
bash
Aboutus
│   ├── AboutUs.vue
│   ├── Header.vue
│   ├── Report.vue
│   ├── Strength.vue
│   ├── StrengthUnit.vue
│   └── Unit.vue

  例如components/Aboutus/Aboutus.vue，实际使用的时候组件名为AboutusAboutUs，这很蠢，也是写vue的时候想不到的。以后要改。

  • pages即路由，和vue中的views类似。需要注意的是index.vue的特殊性以及[id].vue的用法。
bash
├── news
│   ├── news_id      
│   │   └── [id].vue     // https://www.eddiehza.cn/news/news_id/:id
│   └── news_section
│       └── index.vue    // https://www.eddiehza.cn/news/news_section

外置组件 ​

  目前用的多的组件大多都做好了nuxt适配。例如vueuse,elementui等等，配置很简单，修改nuxt.config.ts即可。

ts
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  modules: [
    '@vueuse/nuxt',
    '@element-plus/nuxt'
  ],
  css: ['~/assets/css/global.css'],
})

vue的适配 ​

  绝大多数的常用组件，例如ref,computed,onMounted等等都自动引入了，所以写nuxt中的vue非常的简单明了。需要注意的是路由跳转使用navigateTo会比较好，用<NuxtPage>代替<Routerview>。

网络请求 ​

  看官网吧，不用axios。