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 添加和移除函数的通用方法
Oct 20 Javascript
往光标所在位置插入值的js代码
Sep 22 Javascript
jQuery中$.fn的用法示例介绍
Nov 05 Javascript
Js冒泡事件详解及阻止示例
Mar 21 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
node.js中express-session配置项详解
May 31 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
JavaScript快速调试的两个技巧
Nov 04 Javascript
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计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
ThinkPHP3.2.1图片验证码实现方法
2016/08/19 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
详解PHP PDO简单教程
2019/05/28 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
js文件缓存之版本管理详解
2013/07/05 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
Python简单连接MongoDB数据库的方法
2016/03/15 Python
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
在Python中执行系统命令的方法示例详解
2017/09/14 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
python和flask中返回JSON数据的方法
2018/03/26 Python
用python爬取租房网站信息的代码
2018/12/14 Python
python 通过exifread读取照片信息
2020/12/24 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
应用化学专业本科生求职信
2013/09/29 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
代理词怎么写
2015/05/25 职场文书
标枪加油稿
2015/07/22 职场文书