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",
}