vue多界面开发
1. 安装 vue-cli
,已有的请跳过这一步
npm install -g @vue/cli |
若已安装旧版 vue-cli
则需要先卸载 vue-cli
npm uninstall -g vue-cli |
2. 创建项目
vue create project-name |
创建成功后,目录如下:
3. 修改多界面配置
参考 官方文档。
修改 vue.config.js
文件,在 pages
里增加界面
const { defineConfig } = require('@vue/cli-service') |
如上,我们也需要增加对应的文件。在 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。
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 唯之为之!
评论
ValineGitalk