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创建多页面应用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 在vue-cli项目中使用bootstrap的方法示例

    在一个html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行. 那么在一个用vue-vli生成的前端项目中如何加入?因为框架不一样了,略微要适应一下. 安装插件 npm install jquery --save npm install bootstrap --save npm install popper.js --save 配置webpack.base.conf.js //在顶部添加 const webpack = require('we

  • vue-cli+webpack在生成的项目中使用bootstrap实例代码

    vue-cli+webpack在生成的项目中使用bootstrap实例代码

    在html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行. 那么在一个用vue-vli生成的前端项目中如何加入?因为框架不一样了,略微要适应一下. 脚手架生成项目 执行命令用webpack模板生成一个名为vuestrap的项目(名字任意) vue init webpack vuestrap 在出现的各提示选项中,没什么要求,为了方便,把不用的ESLint,unit tests,e2e都关掉(这些选项都随意). ? Project name v

  • 集成vue到jquery/bootstrap项目的方法

    说明,项目本身使用jquery和bootstrap做的管理后台,部分登录接口跑在node服务端,大部分接口使用springmvc实现.现在,使用vue开发,集成vue到原先的项目中.不影响原先的框架.原来的打包方式是使用fis打包,集成vue之后,先用webpack打包,再用fis打包.互不影响. 1.由于原先使用jquery和bootstrap,所以package.json文件夹下面没有数据.使用vue的时候,需要的依赖全部放到package.json下,添加如下依赖: { "name&quo

  • 如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)

    Bootstrap是网上最流行的前端开发框架. 除了用它,我不知道还有其他更快的方法去构建一个响应式的网站. 但是自从我向网页添加动态功能的工具变成vue.js后.适应bootstrap变得困难起来.因为这带来了一些技术包袱.没错.我说的就是jquery. 这并不是在抨击jquery,我只是意识到,当你已经在项目里使用一些像Vue的框架后,再引入jQuery就会出现一些显著的缺点: 增加开销.jQuery将会使你的网页增加30KB. 在使用诸如webpack一类的打包工具时,jquery也会很难

  • 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 ,执行完就好

  • vue3.0 Reactive数据更新页面没有刷新的问题

    目录 vue3.0 Reactive数据更新页面没有刷新 vue3.0中的reactive用法 在 reactive 使用基本类型参数 响应式代理 vs. 原始对象 总结 vue3.0 Reactive数据更新页面没有刷新 vue 3.0 ref 和 Reactive 数据响应式,以及使用 Reactive 数据已更新但页面没有同步刷新异常 Vue 3.0 中我们使用 reactive() 定义的响应式数据的时候,当我们对象再次赋值,我们发现数据已经修改成功,但是页⾯并没有自动渲染成最新的数据:

  • vue3.0 vue-router4.0打包后页面空白的解决方法

    开发环境可以正常渲染页面,路由跳转都没有问题,但是打包之后本地打开index.html出现报错或者页面空白的情况: 脚手架版本: vue-router版本: 第一种报错-资源加载失败 这种错误是因为vue.config.js的配置里面 publicPath写了绝对路径,生产环境改为./相对路径即可,vue.config.js详细配置参考官方文档 第二种错误:无报错,js加载了,但是页面空白(router-view没有渲染任何内容) 这种情况是因为vue-router的history模式,hist

  • 初探Vue3.0 中的一大亮点Proxy的使用

    前言 不久前,也就是11月14日-16日于多伦多举办的 VueConf TO 2018 大会上,尤雨溪发表了名为 Vue3.0 Updates 的主题演讲,对 Vue3.0 的更新计划.方向进行了详细阐述,表示已经放弃使用了 Object.defineProperty,而选择了使用更快的原生 Proxy !! 这将会消除了之前 Vue2.x 中基于 Object.defineProperty 的实现所存在的很多限制:无法监听 属性的添加和删除.数组索引和长度的变更,并可以支持 Map.Set.W

  • 茶余饭后聊聊Vue3.0响应式数据那些事儿

    茶余饭后聊聊Vue3.0响应式数据那些事儿

    "别再更新了,实在是学不动了"这句话道出了多少前端开发者的心声,"不幸"的是 Vue 的作者在国庆区间发布了 Vue3.0 的 pre-Aplha 版本,这意味着 Vue3.0 快要和我们见面了.既来之则安之,扶我起来我要开始讲了.Vue3.0 为了达到更快.更小.更易于维护.更贴近原生.对开发者更友好的目的,在很多方面进行了重构: 使用 Typescript 放弃 class 采用 function-based API 重构 complier 重构 virtual

  • Vue2.X和Vue3.0数据响应原理变化的区别

    defineProperty 定义对象的属性,只不过属性里的get和set实现了响应式. 常用: value属性值 get set writeable 是否可写 enumrable 可遍历 Vue从改变一个数据到发生改变的过程  Vue2.X数据响应原理 创建页面,实现延时2s修改对象的值. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>LearnVue

  • 你准备好迎接vue3.0了吗

    前言 本月21号晚上看了尤大大的直播,感觉vue3.0离我们越来越近了,预计年中正式发布,3.0的改变的确很大,性能提升了很多,很多东西也在靠向react.为了到时可以很快的转入vue3.0的阵营,从现在开始熟悉新的特性是很有必要的. 如果你想在v2.x中使用3.0的内容,可通过以下方式 npm install '@vue/composition-api' 在main.js中引入 import VueCompositionApi from '@vue/composition-api'; Vue.

  • 基于vue3.0.1beta搭建仿京东的电商H5项目

    前言 就在前段时间,vue官方发布了3.0.0-beta.1 版本,趁着五一假期有时间,就把之前的一个电商商城的项目,用最新的Composition API拿来改造一下! GitHub地址请访问:https://github.com/GitHubGanKai/vue3-jd-h5 项目介绍 vue-jd-h5是一个电商H5页面前端项目,基于Vue 3.0.0-beta.1 + Vant 实现,主要包括首页.分类页面.我的页面.购物车等. 本地线下代码vue2.6在分支demo中,使用mockjs

  • 15分钟上手vue3.0(小结)

    Vue 3 还没有正式发布,但是 Alpha 版本已经发布了. 虽然官方还不推荐在生产环境中直接使用 Vue 3 ,但是提前学习总归是有好处的. 嘴上喊着老子学不动了,双手还是很诚实的打开了 Vue 3 文档 创建项目 Vue 官方很贴心的提供了一个 github 仓库,让我们能快速体验Vue 3的新特性: git clone https://github.com/vuejs/vue-next-webpack-preview.git vue3-start cd vue3-start npm in

  • 精读《Vue3.0 Function API》

    1. 引言 Vue 3.0 的发布引起了轩然大波,让我们解读下它的 function api RFC详细了解一下 Vue 团队是怎么想的吧! 首先官方回答了几个最受关注的问题: Vue 3.0 是否有 break change,就像 Python 3 / Angular 2 一样? 不,100% 兼容 Vue 2.0,且暂未打算废弃任何 API(未来也不).之前有草案试图这么做,但由于用户反馈太猛,被撤回了. Vue 3.0 的设计盖棺定论了吗? 没有呀,这次精读的稿子就是 RFC(Reques

随机推荐