当前位置: 首页 > 编程笔记 >

Vue3.0结合bootstrap创建多页面应用

梁丘诚
2023-03-14
本文向大家介绍Vue3.0结合bootstrap创建多页面应用,包括了Vue3.0结合bootstrap创建多页面应用的使用技巧和注意事项,需要的朋友参考一下

本人主要做c#winform应用,刚接触vue,发现用vue做单页面应用的比较多,多页面的资料很少,特别是用vue3.0版本做多页面的资料,更少,所以自己整理一下,结合bootstrap和jquery,也可以给有需要的同行做个参考。

1.首先用 vue --version 命令查一下安装的vue-cli版本,要3.x版本,我原先装的是2.9.6版本的

2.卸载vue-cli,执行命令:cnpm uninstall -g vue-clinpm uninstall -g vue-cli ,执行完就好了

3.安装vue-cli3.x版本:cnpm install -g @vue/cli

4.安装完毕后,查看一下版本:默认装的最新版,3.8.2

5.切换到你的项目文件夹,准备创建项目吧,cmd命令操作就好了

6.执行 vue create <项目名称>创建项目吧,我这里直接用j做测试好了

7.新版的项目创建,会有选项可以配置,这里就不做赘述,百度有哈,一路默认回车也可以

从别人那里看到的配置图,可以参考:

8.项目安装完了会有如下提示

9.执行cd j跳转到项目路径内

10.执行 npm run serve命令,即可启动服务

可以看到有两个地址,第一个是用于本地测试,第二个是用于局域网测试,复制其中一个到浏览器运行即可。

总结

以上所述是小编给大家介绍的Vue3.0结合bootstrap创建多页面应用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 主要内容:HTML 代码接下来我们通过 Bootstrap3 来创建一个简单的响应式网页。 在学习之前我们可以先看下效果:https://www.xnip.cn/try/demo_source/bootstrap3-makewebsite.htm HTML 代码 <div class="jumbotron text-center" style="margin-bottom:0"> <h1>我的第一个 Bootstrap

  • 本文向大家介绍Django自定义分页与bootstrap分页结合,包括了Django自定义分页与bootstrap分页结合的使用技巧和注意事项,需要的朋友参考一下 django中有自带的分页模块Paginator,想Paginator提供对象的列表,就可以提供每一页上对象的方法。 这里的话不讲解Paginator,而是自定义一个分页类来完成需求: 利用bootstrap的css,生成好看的html

  • 作为写文章的补充,Jekyll 还可以创建静态页面。利用 Jekyll 带来的便利,你只需要复制文件或文件夹,就是这么简单。 主页 像任何网站的配置一样,需要按约定在站点的根目录下找到 index.html 文件,这个文件将被做为主页显示出来。除非你的站点设置了其它的文件作为默认文件,这个文件就将是你的 Jekyll 生成站点的主页。 提示: 在主页上使用布局 站点上任何 HTML 文件,包括主页

  • 我们已经设计好了数据表,创建的 Blog 已经安装到了 Plus 程序上,这一章,我们来编写前台所需要的 UI 和逻辑部分。注意,这里不是去拓展 PC 的 UI,而是使用 Bootstrap 3 编写 Blog 的页面,因为我这里拟定你是使用开源版的 Plus 程序。 从这里开始,需要用到的 Laravel 知识 Blade 模板引擎 布局设计 在编写页面前,我们先来设计一下页面大体布局,我们先设

  • 本页介绍了如何创建 MOSN 文档页面。 开始之前 在开始编写 MOSN 文档之前,首先需要你创建一个 MOSN 文档存储库,和熟悉 MOSN 的文档结构。 页面类型 文档 系统化介绍 MOSN 使用的文档,由 MOSN 团队官方维护。 博客 周期化发布的 MOSN 博客,来自社区贡献。 新闻 关于 MOSN 社区的新闻信息。 发布 MOSN 的新版本发布信息。 文档结构 所有文档都位于 cont

  • 在mobile app开发过程中,经常会出现共用的导航栏或者选项卡,每次打开页面都需要重新渲染,而且容易出现卡头卡尾的现象。并且此时若使用局部滚动,在android手机上会出现滚动不流畅的问题; mui现在提供两种解决方案: 第一种(官方推荐):在plus环境下,使用原生titleNView以及原生tabbar来替换页面的导航栏或者选项卡。在页面打开时,渲染已经完成,让你的应用更接近原生app。具