尝试搭建 Vue3+nuxt3+typescript+vuex+i18n+axios+element plus+...(二)

1、准备好nuxt项目 ， 运行，保证不报错，

yarn install

yarn dev
           

2、因为想要使用vue普通目录src， 或者src子文件夹， 修改配置 nuxt.config.ts  增加srcDir配置

  顺便加了meta 配置目录，修改系统名字  和默认404跳转页面

srcDir: "src/main/webapp",

  css: [
    "element-plus/dist/index.css",
    "normalize.css",
    "@/assets/css/index.scss",
  ],

  meta: {
    title: "***平台",
    meta: [
      { charset: "utf-8" },
      {
        name: "viewport",
        content: "width=device-width, initial-scale=1, user-scalable=0",
      },
      {
        hid: "keywords",
        name: "keywords",
        content: "keywords",
      },
      {
        hid: "description",
        name: "description",
        content: "description",
      },
    ],
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
    script: [],
  },
  //跳转404页面
  router: {
    extendRoutes(routes: any) {
      routes.push({
        path: "*",
        redirect: "/404",
      });
    },
  },
           

将对应的 文件夹目录 拖入创建的src 中：  app.vue, pages, assets, components,layouts. store, utils....等

3、 将package.json增加 相关的包， 使用“yarn add 包名”   安装

       曾尝试吧vue3需要的包全部拷入 package.json， 统一使用cnpm install 或者 yarn install安装

      安装完以后发现运行报错， 于是重建，（幸好改造过程放在自己的gitee上面， 因为要面临反复重试）

       尝试过程发现， nuxt，已经默认引入了绝大部分包， 不需要再 安装， 仅仅有少数的两个，需要 手动安装 

并且 是在运行过程中 ， 页面上需要哪个，安装哪个

安装方式 yarn add 包名

"devDependencies": {
    "nuxt3": "latest",
    "sass": "^1.49.9"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^1.1.1",
    "@nuxtjs/axios": "^5.13.6",
    "echarts": "^5.3.2",
    "element-plus": "^2.0.5",
    "gojs": "^2.2.7",
    "mitt": "^3.0.0",
    "qrcodejs2-fixes": "^0.0.2",
    "sass-loader": "^12.6.0",
    "splitpanes": "^3.1.1",
    "typescript": "^4.6.3",
    "vue-i18n": "^9.1.9",
    "vuex": "^4.0.2",
  }