从零创建一个Nuxt3项目 - 不定时更新

原创

93年的老男孩 2024-08-26 19:54:33 博主文章分类：前端 ©著作权

文章标签 nuxt3 vue3 ssr 服务端渲染 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者93年的老男孩的原创作品，请联系作者获取转载授权，否则将追究法律责任

Nuxt3项目准备

1. 安装Nuxt

npx nuxi@latest init demo
# Which package manager would you like to use?
# ● npm
# ○ pnpm
# ○ yarn
# ○ bun

# ❯ Initialize git repository?
# ○ Yes / ● No

2. 安装依赖项

cd demo
npm install

3.启动项目

npm run dev

自定义启动端口

1. 增加 ip + 自定义端口访问

// 修改文件 nuxt.config.ts 增加如下配置
devServer: {
  host: "0.0.0.0",
  port: 9501,
}
// 改动后为
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  devServer: {
    host: "0.0.0.0",
    port: 9501,
  }
})

多环境编译

1. 增加环境变量

// 修改文件 nuxt.config.ts 增加如下配置
vite: {
  // 增加自定义属性
  define: {
    'process.env.MODE': JSON.stringify(process.env.MODE || 'dev')
  }
}
// 改动后为
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  devServer: {
    host: "0.0.0.0",
    port: 9501,
  },
  vite: {
    // 增加自定义属性
    define: {
      'process.env.MODE': JSON.stringify(process.env.MODE || 'dev')
    }
  }
})

2. 增加启动命令

# 修改文件 package.json 文件 ，scripts 下增加如下配置
"produce": "MODE=produce nuxt dev",
"generate:produce": "MODE=produce nuxt generate",
# 改动后为
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "produce": "MODE=produce nuxt dev",
    "generate": "nuxt generate",
    "generate:produce": "MODE=produce nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "nuxt": "^3.13.0",
    "vue": "latest"
  }
}

3. 文件内读取判断当前环境

// 当启动命令为 npm run produce
// 文件内可读取环境变量 MODE
const mode = process.env.MODE;
if(mode == "produce"){
  // 线上环境
}else{
  // 测试环境
}

增加中间件

1. 增加全局中间件 middleware/auth.global.js

// page.vue 文件增加如下
definePageMeta({
  meta:{
      isAuth:true
  }
})

// 增加文件 middleware/auth.global.js 内容如下
export default defineNuxtRouteMiddleware((to, from) => {
    let check = false;// 模拟未通过校验
    if (!check && to.meta.meta !== undefined && to.meta.meta.isAuth){
        // 校验未通过 跳转 登录
        return navigateTo("/login")
    }
})

2. 增加自定义中间件 middleware/auth1.js 和 middleware/auth2.js

// page.vue 文件增加如下
definePageMeta({
  middleware: [
    'auth1',
    function (to, from) {
      // 自定义内联中间件
    },
    'auth2',
  ],
});

// 增加文件 middleware/auth1.js 内容如下
export default defineNuxtRouteMiddleware((to, from) => {
    let check = false;// 模拟未通过校验
    if (!check && to.meta.meta !== undefined && to.meta.meta.isAuth){
        // 校验未通过 跳转 登录
        return navigateTo("/login")
    }
})

// 增加文件 middleware/auth2.js 内容如下
export default defineNuxtRouteMiddleware((to, from) => {
    let check = false;// 模拟未通过校验
    if (!check && to.meta.meta !== undefined && to.meta.meta.isAuth){
        // 校验未通过 跳转 登录
        return navigateTo("/login")
    }
})

// 执行顺序为:auth.global.ts > auth1.ts > 自定义 function > auth2.ts

增加全局CSS

1. 增加文件 assets/styles/common.css

@charset "utf-8";
*{ padding: 0;margin: 0; border: 0; list-style-type: none; text-decoration: none; font-family: '微软雅黑','宋体';color: #333;outline:none;}

2. 全局引用

// 修改文件 nuxt.config.ts 增加如下配置
 css: ['~/assets/styles/common.css']
// 改动后为
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  devServer: {
    host: "0.0.0.0",
    port: 9501,
  },
  vite: {
    // 增加自定义属性
    define: {
      'process.env.MODE': JSON.stringify(process.env.MODE || 'dev')
    }
  },
  css: ['~/assets/styles/common.css']
})

增加pinia

1. 修改文件 package.json

# 修改文件 package.json 增加如下配置
"overrides": {
  "vue": "latest"
}
# 改动后为
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "produce": "MODE=produce nuxt dev",
    "generate": "nuxt generate",
    "generate:produce": "MODE=produce nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "nuxt": "^3.13.0",
    "vue": "latest"
  },
  "overrides": {
    "vue": "latest"
  }
}

2. 安装pinia

npm install pinia @pinia/nuxt

3. 使用pinia

修改文件 nuxt.config.ts 增加如下配置

// 修改文件 nuxt.config.ts 增加如下配置
modules:[
  '@pinia/nuxt',
],
// 改动后为
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  devServer: {
    host: "0.0.0.0",
    port: 9501,
  },
  modules:[
    '@pinia/nuxt',
  ],
  vite: {
    // 增加自定义属性
    define: {
      'process.env.MODE': JSON.stringify(process.env.MODE || 'dev')
    }
  },
  css: ['~/assets/styles/common.css']
})

增加文件 store/showStore.ts

// 增加文件 store/showStore.ts
import { defineStore, mapActions } from "pinia";

export const useShowStore = defineStore("show-store",() => {
    let pageShow = ref(false);
    function setPageShow(value:boolean){
        pageShow.value = value;
    }
    return {pageShow,setPageShow}
})

使用pinia

// 修改page.vue
// 在setup内增加
import { useShowStore } from '~/store/showStore';
const showStore = useShowStore()

// 使用pinia
// template 内使用 pageShow 
{{ showStore.pageShow }}

// setup内修改 pageShow
showStore.setPageShow(true)

使用前端代理proxy

// 修改文件 nuxt.config.ts 在 vite 下增加如下配置
server: {
  proxy: {
    '/api': {
      target: 'https://you-domain.com',
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, '')
    }
  }
}
// 改动后为
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  devServer: {
    host: "0.0.0.0",
    port: 9501,
  },
  modules:[
    '@pinia/nuxt',
  ],
  vite: {
    // 增加自定义属性
    define: {
      'process.env.MODE': JSON.stringify(process.env.MODE || 'dev')
    },
    server: {
      proxy: {
        '/api': {
          target: 'https://you-domain.com',
          changeOrigin: true,
          rewrite: path => path.replace(/^\/api/, '')
        }
      }
    }
  },
  css: ['~/assets/styles/common.css']
})

服务端渲染 (SSR)

1.修改文件 nuxt.config.ts 增加如下配置

// 修改文件 nuxt.config.ts 增加如下配置
ssr: true
// 改动后为
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  ssr: true,
  devServer: {
    host: "0.0.0.0",
    port: 9501,
  },
  modules:[
    '@pinia/nuxt',
  ],
  vite: {
    // 增加自定义属性
    define: {
      'process.env.MODE': JSON.stringify(process.env.MODE || 'dev')
    },
    server: {
      proxy: {
        '/api': {
          target: 'https://you-domain.com',
          changeOrigin: true,
          rewrite: path => path.replace(/^\/api/, '')
        }
      }
    }
  },
  css: ['~/assets/styles/common.css']
})

2.编译时命令

npm run generate:produce

上一篇：html页面常用样式代码示例

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

从零创建一个Nuxt3项目 - 不定时更新

从零创建一个Nuxt3项目 - 不定时更新

Nuxt3项目准备

1. 安装Nuxt

2. 安装依赖项

3.启动项目

自定义启动端口

1. 增加 ip + 自定义端口 访问

多环境编译

1. 增加环境变量

2. 增加启动命令

3. 文件内读取判断当前环境

增加中间件

1. 增加全局中间件 middleware/auth.global.js

2. 增加自定义中间件 middleware/auth1.js 和 middleware/auth2.js

增加全局CSS

1. 增加文件 assets/styles/common.css

2. 全局引用

增加pinia

1. 修改文件 package.json

2. 安装pinia

3. 使用pinia

修改文件 nuxt.config.ts 增加如下配置

增加文件 store/showStore.ts

使用pinia

使用前端代理proxy

服务端渲染 (SSR)

1.修改文件 nuxt.config.ts 增加如下配置

2.编译时命令

51CTO博客

1. 增加 ip + 自定义端口访问