AdvancedNuxt：Part of the UX system manages related page development

Construction

Component

Introduction

此 Nuxt3 项目用于开发 UX 系统 管理(任务管理)目录下 统计管理、菜单设置页面。

Table of Contents

• Technologies
• Code Formatter
• Development
  • 菜单设置
  • 统计管理
• Production

Technologies

AdvancedNuxt uses the following technologies:

• Nuxt3 as the Vue framework.
• Pinia for state management in Vue.
• TypeScript for type safety.

Code Formatter

• Prettier
• Eslint

Development

clone this repository

git clone git@github.com:imc-ux/AdvancedNuxt.git

install dependencies

npm install

local development

npm run dev

Start the development server on http://127.0.0.1:8011/cusys/nuxt/

The pages are generated from pages/

菜单设置: http://127.0.0.1:8011/cusys/nuxt/settings/

统计管理: http://127.0.0.1:8011/cusys/nuxt/analysis/

Production

Build the application for production

打包之前，先配置好 nuxt.config.ts 文件。

  # nuxt.config.ts
  export default defineNuxtConfig({
    app: {
      baseURL: '/cusys/nuxt/', // 配置一个绝对地址，指向资源存放目录
      buildAssetsDir: '/static/',
    },
  })

generate: 构建应用程序并生成每个路径作为 HTML 文件。

npm run generate

生成.output， .output/public/文件夹下内容上传服务器。

使用 generate 打包后每个对应的页面都会生成一个 html，打包的时候不能关闭后台，它会请求后台数据生成首屏的数据。

FAQ

Cannot find module '...\node_modules\pinia\dist\pinia.mjs'

npm install --save pinia @pinia/nuxt pinia-plugin-persist --legacy-peer-deps

Failed to resolve import "element-plus"

npm install element-plus --save --legacy-peer-deps

Failed to resolve import "@vueup/vue-quill" from "pages\settings\index.vue". Does the file exist?

npm install @vueup/vue-quill@latest --legacy-peer-deps

Go to Top