脚手架搭建的vue项目里引入jquery和bootstrap

引入jquery:

1.在cmd输入:npm install jquery,回车,等待..

2.在webpack.base.conf.js里进行如下操作:

3.在webpack.prod.conf.js里进行如下操作:

4.在入口文件里引入:

不知道是不是jquery版本的问题,在重构以前写的页面时,通过在.vue文件里引入js的方式将写好的js引入(该js文件里用了jquery插件),部分功能有问题

引入bootstrap

参照网上的方式进行了实践,生效了。

主要在配置文件里添加了两个配置文件,这个两个文件一定要放在一起

1.bootstrap.config.js文件:

module.exports = {

// Default for the style loading
styleLoader: require(‘extract-text-webpack-plugin‘).extract(‘style-loader‘, ‘css-loader!postcss-loader!less-loader‘),

scripts: {
‘transition‘: true,
‘alert‘: true,
‘button‘: true,
‘carousel‘: true,
‘collapse‘: true,
‘dropdown‘: true,
‘modal‘: true,
‘tooltip‘: true,
‘popover‘: true,
‘scrollspy‘: true,
‘tab‘: true,
‘affix‘: true
},
styles: {
"mixins": true,

"normalize": true,
"print": true,

"scaffolding": true,
"type": true,
"code": true,
"grid": true,
"tables": true,
"forms": true,
"buttons": true,

"component-animations": true,
"glyphicons": true,
"dropdowns": true,
"button-groups": true,
"input-groups": true,
"navs": true,
"navbar": true,
"breadcrumbs": true,
"pagination": true,
"pager": true,
"labels": true,
"badges": true,
"jumbotron": true,
"thumbnails": true,
"alerts": true,
"progress-bars": true,
"media": true,
"list-group": true,
"panels": true,
"wells": true,
"close": true,

"modals": true,
"tooltip": true,
"popovers": true,
"carousel": true,

"utilities": true,
"responsive-utilities": true
}
};

2.bootstrap.strap.config.less文件(据说空的也行,没试过):

@font-size-base: 24px;
@btn-default-color: #444;
@btn-default-bg: #eee;

3.在入口文件通过import ‘/path/bootstrap.min.js‘的方式引入;

4.bootstrap样式可以采取上述方式引入或者在index.html里引入;

5.其他插件也可通过import方式引入,但部分插件可能会出现问题,解决方案自行google

时间: 2025-02-01 08:44:12

脚手架搭建的vue项目里引入jquery和bootstrap的相关文章

如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

copy内容的网址: https://segmentfault.com/a/1190000007020623 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码 // 在开头引入webpack,后面的plugins那里需要 var webpack = require('webpack') // resolve module.exports = { // 其他代码... resolv

如何在 vue 项目里正确地引用 jquery

转载 2016年11月13日 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码 // 在开头引入webpack,后面的plugins那里需要 var webpack = require('webpack') // resolve module.exports = { // 其他代码... resolve: { extensions: ['', '.js', '.vue'], fa

vue项目中引入Sass

Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g,安装vue-cli脚手架,若是已经安装了,则不必再次安装,直接 跳过这一步.接下来执行命令行vue init webpack mypro(注:mypro是项目名). 接下来安装Sass依赖包,使用以下命令行: npm install sass-loader --save-dev npm instal

vue-用Vue-cli从零开始搭建一个Vue项目

Vue是近两年来比较火的一个前端框架(渐进式框架吧). Vue两大核心思想:组件化和数据驱动.组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用:数据驱动是前端的未来发展方向,释放了对DOM的操作,让DOM随着数据的变化自然而然的变化(尤神原话),不必过多的关注DOM,只需要将数据组织好即可.本文用Vue-cli从零开始搭建一个Vue项目. 准备工作 1.下载安装Node.js 下载地址:https://nodejs.org/en/download/ ,选择合适自己的版本下载即可

完整搭建一个vue项目

目录 一. 搭建一个vue项目的完整步骤 二. 卸载vue-cli 三. 完全卸载webpack 一. 搭建一个vue项目的完整步骤 1.安装node.js 下载地址 # 检查是否安装成功 node -v npm -v 2.为了提高下载效率,可以使用淘宝镜像 # 淘宝镜像 npm install -g cnpm -registry=https://registry.npm.taobao.org # 检查是否安装成功 cnpm -v 3.安装webpack打包工具 webpack中文文档 npm

vue 项目里正确地引用 jquery

一.NPM安装的jQuery 使用vue-cli构建的vue项目,需要修改的是build/webpack.base.conf.js 1.添加引入webpack,后面的plugins那里需要 const webpack = require('webpack') 2.增加一个plugins plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({ $: "jquery&qu

使用vue-cli脚手架自动化搭建一个vue项目

最近在学习使用vue,简单汇总下如何使用vue-cli脚手架自动化搭建一个vue项: 1.首先,要安装node.js,之后第一步检测是否安装node:没有安装node的同学请到官网下载安装 https://nodejs.org/en/download/ 安装成功后在命令行查看node版本,如果有说明安装成功. 2.之后全局安装vue-cli脚手架 电脑进入cmd,任意路径下 使用 npm命令:npm install vue-cli -g 注意:npm -v 3.0+   npm版本需要在3.0之

抛开vue-cli 利用requireJS搭建一个vue项目

---恢复内容开始--- 现在学习vue都是利用脚手架vue-cli快速搭建一个项目,这是非常高效的方法,我是十分推荐的,但是有时候在没有互联网的情况,我们没办法在node环境下,敲一个nmp install XXX帮我们搭建系统.这边也遇到了这样的情况,记录一下过程,备忘. 采用的方式是利用requireJS搭建一个遵循AMD规则的vue项目.关于这一块,大家可以百度一下,查询相关资料熟悉requireJS的使用. 第一步,都是建立一个如下常规的简单的工程结构: ----lib 存放js库文件

如何搭建一个vue项目(完整步骤)

参考资料 一.安装node环境 1.下载地址为:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3.为了提高我们的效率,可以使用淘宝的镜像:http://npm.taobao.org/ 输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了. 检查是否安装成功: 二.搭建vue项目环境 1