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下过滤数组重复值的代码
Sep 10 Javascript
js刷新框架子页面的七种方法代码
Nov 20 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
Nov 17 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
微信小程序实现皮肤功能(夜间模式)
Jun 18 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
vue视图不更新情况详解
May 16 Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 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
codeigniter实现get分页的方法
2015/07/10 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
2014/08/18 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
一系列Bootstrap导航条使用方法分享
2016/04/29 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
Python 错误和异常小结
2013/10/09 Python
Python中的各种装饰器详解
2015/04/11 Python
使用Python中的tkinter模块作图的方法
2017/02/07 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
python 自定义装饰器实例详解
2019/07/20 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
2020/12/04 Python
python unichr函数知识点总结
2020/12/16 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
会计实习自我鉴定
2013/12/04 职场文书
小学生考试获奖感言
2014/01/30 职场文书
中专毕业生个人职业生涯规划
2014/02/19 职场文书
营销团队口号
2014/06/06 职场文书
商场促销活动总结
2014/07/10 职场文书
建筑工地文明标语
2014/10/09 职场文书
2015迎新晚会活动总结
2015/07/16 职场文书
2016小学新学期寄语
2015/12/04 职场文书
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python