Nuxt3+Vue3(Composition API)+TS+Vite+Ant Design Vue 搭建

最近官网搭建选择了nuxtjs，由于框架更新了，其中语法也有很多变化，中间遇到了一些问题点做下总结。

nuxt3官方文档地址：https://nuxt.com/docs/getting-started/installation
中文文档地址：https://www.nuxt.com.cn/
有大神翻译的中文文档: https://57code.gitee.io/nuxt3-docs-zh/

安装

在安装Nuxt3之前，你需要保证你的node.js大于16.10.0 或者最新版本，我是用得最新版本18

创建一个nuxt项目

npx nuxi init <project-name>

切换到刚创建的项目根目录

cd <project-name>

下载相关依赖

npm install

Nuxt3 的目录结构

• assets/: 存放静态资源文件，如样式、图片、字体等。
• components/: 存放组件文件，可以在页面中引用。
• layouts/: 存放布局文件，可以在页面中引用。
• middleware/: 存放中间件文件，可以在路由中使用。
• composables/: 存放可重用的逻辑代码，可以在页面、组件和插件中使用。
• pages/: 存放页面文件，每个文件对应一个路由。
• plugins/: 存放插件文件，可以在应用程序中使用。
• static/: 存放静态文件，如 robots.txt、favicon.ico 等。
• store/: 存放 Vuex store 文件。
• server/: 存放服务器端代码，包括中间件、API、插件等等。
• utils/: 存放工具函数文件。
• nuxt.config.ts: Nuxt3 的配置文件，使用 TypeScript 编写。
• package.json: 项目的依赖和脚本配置文件。
• tsconfig.json: TypeScript 的配置文件。

引入Ant Design Vue

我使用得是最新版本 4.1.2

https://next.antdv.com/components/overview

安装

npm install ant-design-vue@4.x --save

plugins文件夹下创建ant-design-vue.ts文件

// import { Button,Layout } from'ant-design-vue';//局部功能使用
import Antd from 'ant-design-vue'; //全局使用 
export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(Antd);  //全局使用 
    // nuxtApp.vueApp.use(Button).use(Layout)//局部功能使用
});

这样就可以

pinia + pinia-plugin-persistedstate 实现数据持久化存储

pinia: https://pinia.vuejs.org/zh/ssr/nuxt.html
pinia-plugin-persistedstate: https://prazdevs.github.io/pinia-plugin-persistedstate/zh/frameworks/nuxt-3.html

在nuxt.config.ts配置

export default defineNuxtConfig({
  modules: ['@pinia/nuxt', '@pinia-plugin-persistedstate/nuxt'],
}) 

创建在根目录下创建stores/user.ts

import { defineStore } from "pinia"; // 引入pinia
//  stores/user
export const useUserStateStore = defineStore("main", {
  state: () => {
    return {
      token: "",
      isAngelUser: '',
      isVIPUser: '',
      userInfo: ''
    };
  },
  persist: process.client && { // 仅在客户端使用
    storage: localStorage, // localStorage 本地存储，可替换sessionStorage
  },
});

在页面中设置和使用

import { useUserStateStore } from "~/store/user";

export default defineComponent({
  name: 'echartsEdit',
  components: {
    StarOutlined,
    StarFilled,
    StarTwoTone,
    MessageOutlined
  },
  setup() {
    const store = useUserStateStore(); //定义store
    store.token = '123'; // 设置
    return {
      
    }
  },
})

使用

const store = useUserStateStore(); 
var a = store.token;

自定义主题色

在layouts文件夹下面创建default.vue文件

  <div style="height: 100%;">
    <Preloader v-if="loading"/>
    <a-config-provider
      :theme="{
        token: {
          colorPrimary: '#E95513',
        },
      }"
    >
      <NuxtPage></NuxtPage>
    </a-config-provider>
  </div>

使用pm2部署

根目录创建 pm2.config.json 文件

{
  "apps": [
    {
      "name": "ddchart",
      "script": "PORT=3001 node ./.output/server/index.mjs"
    }
  ]
}

我们需要打包后的.output文件
服务器上执行
npm2 start pm2.config.json