用vue构建项目笔记3(引入jquery和bootstrap)
2017-07-14 16:22
766 查看
其实用了vue以后,并不建议再去用jquery. vue是视图与数据双向绑定,可以通过操作数据来控制dom,好处多多,但是有的时候还是不得不引入jq的,比如我们要用bootstrap。
作为前端,切图也是很必要的技能,写适配的css代码量是一个很恐怖的事情,而且要考虑的东西比较多,难免有遗漏,造成BUG。而引入bootstrap后,优秀的的栅格系统以及适配能力,会省很多事情。所以引入bootstrap不可避免,而bootstrap完全依赖于jq。。。。
1、npm install jQuery --save-dev //用npm下载jq依赖
2、找到build文件夹下的webpack.base.conf.js 加入var webpack=require('webpack');
在module.exports加入
3、在main.js中加入import jquery from 'jquery'
至此,引入jq完成
引入bootstrap只需要在main.js中写入
import './assets/bootstrap/css/bootstrap.min.css'
import './assets/bootstrap/js/bootstrap.min.js'
并在assets的对应路径放入bootstrap文件即可。
下面就可以在组件中使用bootstrap了
注意:根据实测,我这样流程肯定是没问题的,最后配置完成后需要重新npm run dev,因为webpack.base.conf.js不会实时更新
作为前端,切图也是很必要的技能,写适配的css代码量是一个很恐怖的事情,而且要考虑的东西比较多,难免有遗漏,造成BUG。而引入bootstrap后,优秀的的栅格系统以及适配能力,会省很多事情。所以引入bootstrap不可避免,而bootstrap完全依赖于jq。。。。
1、npm install jQuery --save-dev //用npm下载jq依赖
2、找到build文件夹下的webpack.base.conf.js 加入var webpack=require('webpack');
在module.exports加入
resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src'), 'assets': path.resolve(__dirname, '../src/assets'), 'jquery': path.resolve(__dirname,'../node_modules/jquery/src/jquery') } }
3、在main.js中加入import jquery from 'jquery'
至此,引入jq完成
引入bootstrap只需要在main.js中写入
import './assets/bootstrap/css/bootstrap.min.css'
import './assets/bootstrap/js/bootstrap.min.js'
并在assets的对应路径放入bootstrap文件即可。
下面就可以在组件中使用bootstrap了
注意:根据实测,我这样流程肯定是没问题的,最后配置完成后需要重新npm run dev,因为webpack.base.conf.js不会实时更新
相关文章推荐
- 如何在vue-cli+webpack构建的项目引入jquery和bootstrap
- 饿了么项目---1、vue-cli快速构建项目(包括兼容老项目时需引入bootstrap、jquery的方法)
- vue项目引入bootstrap、jquery
- 用vue构建项目笔记2(引入自定义头部组件)
- vue-cli快速构建项目以及引入bootstrap、jq
- 脚手架搭建的vue项目里引入jquery和bootstrap
- 脚手架搭建的vue项目里引入jquery和bootstrap
- vue开发:脚手架搭建的vue项目里引入jquery和bootstrap
- 详解vue-cli快速构建项目以及引入bootstrap、jq
- vue-cli搭建的项目中引入jquery和bootstrap
- 在进行vue的学习,项目中需要引入bootstrap、jquery的步骤。
- vue-cli快速构建项目>>>>及引入jquery、jquery插件、this的指向 mounted钩子函数应用
- vue-cli 引入jQuery,Bootstrap,popper的方法
- 集成vue到jquery/bootstrap项目的方法
- vue-cli 项目中引入jquery、sass、md5、ElementUI、vue-cookie
- vue-cli项目中单文件组件引入bootstrap.js异常的解决方案
- Vue项目实战(二)- 引入JQuery等第三方库
- 构建vue全家桶项目-引入vue-resource
- vue框架(三)_vue引入jquery、bootstrap
- 用vue构建项目笔记6(在vue中使用vue resource)