例子中css文件采用bootstrap.css，js文件采用jQuery，less文件用less.less(自定义文件)
步骤一：安装webpack
cnpm install webpack -g
步骤二：在src/assets下面新建css、js、less、fonts文件夹，并放入对应文件。
将bootstrap.css放入css目录下，bootstrap.min.js放入js文件下，fonts字体放入fonts目录下
步骤三：安装js依赖
cnpm install jquery --save-dev
步骤四：安装css依赖
cnpm install style-loader --save-dev
cnpminstallcss-loader--save-dev
cnpminstallfile-loader--save-dev
步骤五：安装less依赖
npm install less less-loader --save
步骤六：修改build/webpack.base.conf.js文件，
(1)在开头引入webpack(后面的plugins那里需要)
var webpack = require('webpack')
(2)添加jquery插件，
在module.exports = { entry: {app:'./src/main.js'},
后面加
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
(3)设置路径，
把resolve里面的
alias: {'vue$':'vue/dist/mon.js','src': path.resolve(__dirname,'../src'),'assets': path.resolve(__dirname,'../src/assets'),'components': path.resolve(__dirname,'../src/components')}
改成
alias: {
'vue$': 'vue/dist/mon.js',
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components'),
jquery: "jquery"
}
(4)配置loader加载依赖，
在修改module里面
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
loader: "style-loader!css-loader",
},
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
},
注意：如果utils.js文件里面已经添加了less、css这里不用添加上面后两个test了，否则会报错！！！
(5)配置字体loader加载依赖
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml'},
{test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
{test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/octet-stream"},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader"}
步骤六：接着修改 src文件夹下面的main.js文件，打开文件之后在顶部加入
import'./assets/css/bootstrap.css'
import'./assets/js/bootstrap.min.js'
import'./assets/less/less.less'
现在就可使用less、jquery,如下图所示：
vue-cli构建的vue项目中引入stylus文件
在写基于vue-cli的vue项目时,如果直接引入styl文件,会报错,需要安装stylus.stylus-loader依赖以及别名配置. 1.下载安装stylus.stylus-loader,推荐使 ...
擦他丫的，今天在Django项目中引用静态文件jQuery.js 就是引入报错，终于找到原因了！
擦 ,今天在Django项目中引用静态文件jQuery.js 就是引入报错,终于找到原因了! 问题在于我使用的谷歌浏览器,默认使用了缓存,导致每次访问同一个url时,都返回的是缓存里面的东西.通过谷歌 ...
vue项目中引入Sass
Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...
前端学习笔记系列一：10整体移动vscode代码块、VSCode 使用 stylus，配置格式化设置、在vue项目中引入bootstrap
1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...
在vue项目中引入jquery
在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...
react项目中引入了redux后js控制路由跳转方案
如果你的项目中并没有用到redux,那本文你可以忽略 问题引入 纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redu ...
在vue项目中引入阿里图标库小记
使用Vue技术栈开发不仅效率高,而且很友好,而且还有很多基于vue的UI框架,例如:element等,但是这类框架美中不足的是,图标太少.为了解决这个问题,不得不引入第三方字体库,今天以阿里图标库为例 ...
在 Vue 项目中引入 tinymce 富文本编辑器
项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项 ...
Vue 项目中对路由文件进行拆分(解构的方法)
项目需求场景: 在开发项目过程中,在项目过于庞大,路由信息非常多的情况下,如果将路由配置信息都放在一个文件里面,那么这个JS是不方便维护的, 那么,这个时候需要我们把这个庞大的路由文件,根据项目功能分 ...
随机推荐
Codeforces Round #169 (Div. 2)
A. Lunch Rush 模拟. B. Little Girl and Game 因为可以打乱顺序,所以只关心每种数字打奇偶性. 若一开始就是回文,即奇数字母为0或1种,则先手获胜. 若奇数字母大于 ...
jQueryUI 之控件们
总结:总的来说,这些控件可以在官网找到列子, 部分ui效果不如意的,可根据jQueryUI上添加的类选择器等,进行再加工 < ...
Cocos2dx.3x入门三部曲-软件环境配置(一)
一.环境: Win7 32位 二.必备软件: l Java JDK 下载地址:/technetwork/java/javase/downloads/inde ...
161019、并发容器ConcurrentHashMap
java.util.concurrent.ConcurrentMap一种是用读写锁实现Map的方法.此种方法看起来可以实现Map响应的功能,而且吞吐量也应该不错.但是通过前面对 ...
【分块】bzoj3343: 教主的魔法
3343: 教主的魔法 Time Limit:10 SecMemory Limit:256 MBSubmit:631Solved:272[Submit][Status][Discuss ...
Pair project(刘昊岩11061156 黄明源11061186)
Pair project members:刘昊岩11061156,黄明源11061186 两周时间,工程下午刚刚结束,现做一些总结. 在现有工程基础上修改schedule 包下方法,主要思想是,也就是 ...
关于Ubuntu修改默认运行级别
第一种方法:(内核级别的) Sudo vi /etc/default/grub 修改GRUB_CMDLINE_LINUX_DEFAULT=”quiet splash” 为:GRUB_CMDLINE ...
删除List集合中的元素方法
List集合是我们平时使用的最多的集合了,一般用来存放从数据库中查询的对象数据,但有时我们会从中筛选不需要的数据,第一次使用这种方式: 使用增强for循环遍历,使用list的remove方法删除不符合 ...
win10 家庭版 升级 win10企业版
更改秘钥 我的电脑(右键)->属性->更改产品秘钥 ->96YNV-9X4RP-2YYKB-RMQH4-6Q72D->重启系统如果秘钥过期了,就百度按时间搜索,总有一个是 ...
Linux学习---指针运算、修饰符(const、volatile、typedef)及、运算符(++、--、+、-)
const:常量.只读[不能变] char *p; const char *p; [T] 字符串内容可以为“hello world”或“aaa”,但只读(不可修改) char const *p; ch ...
