分享好友 前端技术首页 频道列表

VUE引入jq bootstrap 之终极解决方案(测试)

bootstrap  2023-02-08 18:510


初入VUE遇见的一些问题,在网上找了些方法,再根据自己的实际项目解决的问题写得此文,,希望对你有所帮助。

vue-cli快速构建项目以及引入boostrap、jq各种插件配置

vue-cli脚手架工具快速构建项目架构:

。。首先默认了有已经安装了node。。。

    

 npm install -g vue-cli                 //  全局安装vue-cli

    

 vue init webpack cnm               //   生成项目名为cnm的的项目模板,cnm自定义

   

  npm install                                  // 到cnm文件夹中打开命令窗口初始化安装依赖

此时文件夹目录应该是这样

 

 

然后输入npm run dev。。不出意外浏览器会自动弹出一个欢迎页面,如果不自动弹出就打开http://localhost:8080

 

 

到这里就可以在对应的文件中修改代码开发项目了。。。但是如果要引入一些插件或者框架怎么办呢?

 

引入jq:

输入 npm install jquery --save-dev      用npm下载jq依赖、

  

 找到build文件夹下的webpack.base.conf.js文件打开,修改配置:

   

1、加入webpack对象:

var webpack=require('webpack');

 

 2、在module.exports里面加入:

plugins: [  
  new webpack.ProvidePlugin({  
    $:"jquery",  
    jQuery:"jquery",  
    "windows.jQuery":"jquery"  
  })  
]  ,
3、在入口文件main.js中加入

import $ from 'jquery'
 

全局引入jq

 

引入bootstrap:
 

1、修改webpack.base.conf.js文件:在resolve中加入

alias: {  
      'vue$': 'vue/dist/vue.esm.js',  
      '@': resolve('src'),  
      'assets': path.resolve(__dirname, '../src/assets'),  
      'jquery': "jquery/src/jquery"  
    }  
 

2、在入口文件main.js中加入:

 

import './assets/css/bootstrap.min.css'  
import './assets/js/bootstrap.min'  
 

 

3、在assets文件目录中拷贝bootstrap各种文件

 

 

试试bootstrap引入成功没:

 

打开hello.vue文件

替换组件模板

<template>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">{{ msg }}</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" >Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</template>
 

打开命令窗口, npm run dev  

 

查看更多关于【bootstrap】的文章

展开全文
相关推荐
反对 0
举报 0
评论 0
图文资讯
热门推荐
优选好物
更多热点专题
更多推荐文章
Bootstrap基础:选择器
1.CSS属性选择器[arrt=value]   该属性有指定的确切值[arrt~=value]  该属性值必须是多个空格隔开的值,比如,class=“title featured home”,而且这些值中的一个必须是指定的值“value”[arrt|=value]  属性的值就是“value”或者以“value”开始并立即

0评论2023-03-16469

Bootstrap.css 中请求googleapis.com/css?family 备忘录
问题描述: Web中引入bootstrap.css中头部有访问Google服务器的请求 @import url("//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700");     国内访问不稳定,页面反应慢解决:将请求结果保存下来,放到本地,重新声明请求1.请求http:

0评论2023-03-16312

基于.NET6、FreeSql、若依UI、LayUI、Bootstrap构建插件式的CMS
近几年,.net生态日益强大,特别是跨平台技术,性能提升,那真的是强大无比。为了日常能够快速开发,笔者基于基于.NET6、FreeSql、若依UI、LayUI、Bootstrap构建插件式的CMS,请大家多提意见建议。在此,要感谢若依CMS的作者,借用了皮肤框架。懒的发文字描述

0评论2023-03-16505

elasticsearch bootstrap.memory_lock
检查bootstrap.memory_lock设置是否生效get http://10.127.0.1:9200/_nodes?filter_path=**.mlockall响应:{"nodes": {"9giihmDNRdS136KT52Gl5g": {"process": {"mlockall": true}},"X0zQESeeT8uJ9kVXvHpl-w": {"process":

0评论2023-03-08659

50 个 Bootstrap 插件
Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等。本文向你推荐 50 个 Bootstrap 的插件,可以考虑在你下一个项目中使用它们。1. Boots

0评论2023-03-08629

Bootstrap资源 bootstrap官方文档
官方网站:http://getbootstrap.com/http://twitter.github.com/bootstrap/index.html 官方博客:http://blog.getbootstrap.com/  中文文档:http://wrongwaycn.github.com/bootstrap/docs/index.html  图标:Font Awesomehttp://fortawesome.github.com

0评论2023-03-08321

bootstrap bootstrap检验
bootstrap是简洁灵活的用于搭建web页面的Html,Css工具集。---是一组简洁强大的前端开发框架。 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。是一个CSS/HTML框架。bootstrap中的js框架依赖于jquery,因此jquery要在bootstrap之前引进一般要把CS

0评论2023-03-08325

002-BootStrap基本模板 bootstrap 模型
!DOCTYPE htmlhtml lang="zh-CN"headmeta charset="utf-8"!--声明文档兼容模式,表示使用IE浏览器的最新模式--meta http-equiv="X-UA-Compatible" content="IE=edge"!--设置视口的宽度(值为设备的理想宽度),页面初始缩放值理想宽度/可见宽度--meta name="vie

0评论2023-03-08506

003-BootStrap完整模板 bootstrap demo
!DOCTYPE htmlhtml lang="zh-CN"headmeta charset="utf-8"!--声明文档兼容模式,表示使用IE浏览器的最新模式--meta http-equiv="X-UA-Compatible" content="IE=edge"!--设置视口的宽度(值为设备的理想宽度),页面初始缩放值理想宽度/可见宽度--!--视口的作用

0评论2023-03-08910

nginx 下 bootstrap fa 字体异常问题
server {listen 8082;#server_name192.168.16.88; #root/home/ywt/workspace/kuF/web/statics;#autoindex on; #autoindex_exact_size off; #autoindex_localtime on; # } 原配置如上,实际图标加载出来乱七八糟; 经过具体分析,实际css文件正常加载,字体

0评论2023-03-08960

bootstrap 响应式布局
先上点媒体查询css(某个著名的”段子“),跟bootstrap无关:htmlheadstylebody {background-color: white;}@media screen and (max-width: 960px){body {background-color: red;}}@media screen and (max-width: 768px){body {background-color: yellow;}}@

0评论2023-03-08482

bootstrap bootstrap用什么软件
bootstrap:简易模版:meta http-equiv='X-UA-Compatible' content='IE=edge' //让IE浏览器运行最新的渲染模式//meta name='renderer' content='webkit'让部分国产浏览器默认采用高速模式渲染页面meta name='viewport' content='width=device-width,initail-

0评论2023-03-08809

bootstrap怎样让按钮或者组件左右对齐 bootstrap怎么调整组件的位置
1.登录页的form表单可以是使用margin:0 auto的方式,居中对齐 2.div可以使用pull-right, text-center, pull-left 3.按钮或者p标签可以使用text-right, text-center, text-left

0评论2023-03-08949

更多推荐