vue多界面开发-工具盒子

1. 安装 `vue-cli`，已有的请跳过这一步 {#1-安装-vue-cli，已有的请跳过这一步}

|-----------|---------------------------------| | 1 | npm install -g @vue/cli |

若已安装旧版 vue-cli 则需要先卸载 vue-cli

|-----------|----------------------------------| | 1 | npm uninstall -g vue-cli |

2. 创建项目 {#2-创建项目}

|---------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 | 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. 修改多界面配置 {#3-修改多界面配置}

参考官方文档。
修改 vue.config.js 文件，在 pages 里增加界面

|------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | 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>，这样可以查看跳转效果。