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 相关文章推荐
JavaScript 获得选中文本内容的方法
Feb 15 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
Dec 04 Javascript
详解参数传递四种形式
Jul 21 Javascript
jquery 遍历数组 each 方法详解
May 25 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 Javascript
利用Node.js如何实现文件循环覆写
Apr 05 Javascript
Layui数据表格跳转到指定页的实现方法
Sep 05 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 Javascript
JavaScript变量Dom对象的所有属性
Apr 30 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 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
DIY实用性框形天线
2021/03/02 无线电
PHP 身份证号验证函数
2009/05/07 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
PHP记录页面停留时间的方法
2016/03/30 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
python实现超简单端口转发的方法
2015/03/13 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
python 图片去噪的方法示例
2019/07/09 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
python实现梯度下降法
2020/03/24 Python
python实现最短路径的实例方法
2020/07/19 Python
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
超市端午节活动方案
2014/01/23 职场文书
高中生的自我鉴定范文
2014/01/24 职场文书
大学生个人自荐信
2014/02/24 职场文书
高中生学期学习自我评价
2014/02/24 职场文书
党日活动总结
2014/05/07 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript
使用CSS实现音波加载效果
2023/05/07 HTML / CSS