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


Posted in Javascript onMay 28, 2019

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

总结

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

Javascript 相关文章推荐
用Div仿showModalDialog模式菜单的效果的代码
Mar 05 Javascript
js字符编码函数区别分析
Dec 28 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 Javascript
javascript实现瀑布流加载图片原理
Feb 02 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
spirngmvc js传递复杂json参数到controller的实例
Mar 29 Javascript
js实现窗口全屏示例详解
Sep 17 Javascript
浅谈layui 表单元素的选中问题
Oct 25 Javascript
JavaScript监听一个DOM元素大小变化
Apr 26 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 Javascript
vue常用高阶函数及综合实例
Feb 25 Vue.js
Vue实现搜索结果高亮显示关键字
May 28 #Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 #Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 #jQuery
小程序多图列表实现性能优化的方法步骤
May 28 #Javascript
实例详解带参数的 npm script
May 28 #Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 #jQuery
Vue2.x通用条件搜索组件的封装及应用详解
May 28 #Javascript
You might like
如何在PHP中使用Oracle数据库(2)
2006/10/09 PHP
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
浅谈JavaScript中面向对象技术的模拟
2006/09/25 Javascript
JavaScript 10件让人费解的事情
2010/02/15 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
2013/04/15 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
js创建数组的简单方法
2016/07/27 Javascript
vue生命周期的探索
2019/04/03 Javascript
vue键盘事件点击事件加native操作
2020/07/27 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
Expected conditions模块使用方法汇总代码解析
2020/08/13 Python
PyCharm上安装Package的实现(以pandas为例)
2020/09/18 Python
学校门卫工作职责
2013/12/07 职场文书
工作自荐信
2013/12/11 职场文书
英文求职信写作小建议
2014/02/16 职场文书
电台实习生求职信
2014/02/25 职场文书
行政部岗位职责范本
2014/03/13 职场文书
个人社会实践自我鉴定
2014/03/24 职场文书
分公司经理任命书
2014/06/05 职场文书
科技节口号
2014/06/19 职场文书
世博会口号
2014/06/20 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
维稳工作承诺书
2015/01/20 职场文书
离婚协议书的范本
2015/01/27 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS