vue多界面开发
1. 安装 vue-cli
,已有的请跳过这一步
npm install -g @vue/cli
若已安装旧版 vue-cli
则需要先卸载 vue-cli
npm uninstall -g vue-cli
2. 创建项目
vue create project-name // 提示 Vue CLI v5.0.8 ? Please pick a preset: (Use arrow keys) > Default ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) Manually select features // 选择vue2,稍等一会提示创建成功,如下 🎉 Successfully created project demo. 👉 Get started with the following commands: $ cd demo $ npm run serve
创建成功后,目录如下:
3. 修改多界面配置
参考 官方文档。
修改 vue.config.js
文件,在 pages
里增加界面
const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, pages: { index: { // page 的入口 entry: 'src/main.js', // 模板来源 template: 'public/index.html', // 在 dist/index.html 的输出 filename: 'index.html', // 当使用 title 选项时, // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title> title: 'Index Page', // 在这个页面中包含的块,默认情况下会包含 // 提取出来的通用 chunk 和 vendor chunk。 chunks: ['chunk-vendors', 'chunk-common', 'index'] }, // 当使用只有入口的字符串格式时, // 模板会被推导为 `public/about.html` // 并且如果找不到的话,就回退到 `public/index.html`。 // 输出文件名会被推导为 `about.html`。 about: 'src/page/about/main.js' } })
如上,我们也需要增加对应的文件。在 src
目录下,新建 page
文件夹,在其下面继续新建 about
文件夹,在 about
下新建对应的 main.js
和 App.js
。
在 public
目录下,新建 about.html
。
提示:
about
文件夹下的App.js
和main.js
均可复制首页对应的同名文件,稍作修改即可。复制之后,记得修改里面的引用地址。- 首页
App.js
里可以增加指向about
界面的连接<p><a href="/about">go to about</a></p>
,about
文件夹下的App.js
里增加指向首页的连接<p><a href="/">go to home</a></p>
,这样可以查看跳转效果。
4. 运行项目查看界面
npm run serve
查看效果
5. 其他
具体可参考我的项目 mulitpage。
https://www.cnblogs.com/weizwz/p/16905938.html
本博客所有文章除特别声明外,均采用 「CC BY-NC-SA 4.0 DEED」 国际许可协议,转载请注明出处!
内容粗浅,如有错误,欢迎大佬批评指正
【推荐】2025 HarmonyOS 鸿蒙创新赛正式启动,百万大奖等你挑战
【推荐】博客园的心动:当一群程序员决定开源共建一个真诚相亲平台
【推荐】开源 Linux 服务器运维管理面板 1Panel V2 版本正式发布
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 为大模型 MCP Code Interpreter 而生:C# Runner 开源发布
· Coze Studio:字节跳动 Coze 的开源版本来了!第一时间深度解析
· 面试时该如何做好自我介绍呢?附带介绍样板示例!!!
· 复杂业务系统线上问题排查过程
· 本可避免的P1事故:Nginx变更导致网关请求均响应400