Vue项目中引入外部文件的方法(css、js、less)


Posted in Javascript onJuly 24, 2017

这两天学习了Vue.js ,正好了解了如何引入外部文件的方法,而且很重要,所以,今天添加一点小笔记。

例子中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

cnpm install css-loader --save-dev

cnpm install file-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/vue.common.js','src': path.resolve(__dirname,'../src'),'assets': path.resolve(__dirname,'../src/assets'),'components': path.resolve(__dirname,'../src/components')}

改成

alias: {

'vue$': 'vue/dist/vue.common.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了,否则会报错!!!

Vue项目中引入外部文件的方法(css、js、less)

 (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项目中引入外部文件的方法(css、js、less)

Vue项目中引入外部文件的方法(css、js、less)

Vue项目中引入外部文件的方法(css、js、less)

Vue项目中引入外部文件的方法(css、js、less) 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 插件 任意位置浮动固定层
Dec 25 Javascript
jquery五角星评分插件示例分享
Feb 21 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
Jul 01 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
Angularjs实现分页和分页算法的示例代码
Dec 23 Javascript
js实现楼层导航功能
Feb 23 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
JS中的继承操作实例总结
Jun 06 Javascript
关于JavaScript中异步/等待的用法与理解
Nov 18 Javascript
JS实现简易日历效果
Jan 25 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 #Javascript
深入理解基于vue-cli的vuex配置
Jul 24 #Javascript
JS按条件 serialize() 对应标签的使用方法
Jul 24 #Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 #Javascript
关于vue-resource报错450的解决方案
Jul 24 #Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 #Javascript
react-router4 嵌套路由的使用方法
Jul 24 #Javascript
You might like
简单采集了yahoo的一些数据
2007/02/14 PHP
PHP随机生成随机个数的字母组合示例
2014/01/14 PHP
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
IE与firefox之jquery用法区别
2008/10/03 Javascript
JavaScript设计模式之外观模式实例
2014/10/10 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
2016/08/18 Javascript
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
了解重排与重绘
2019/05/29 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
python遍历类中所有成员的方法
2015/03/18 Python
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
python 5个顶级异步框架推荐
2020/09/09 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
安德玛菲律宾官网:Under Armour菲律宾
2020/07/28 全球购物
销售总监岗位职责
2014/01/04 职场文书
教师批评与自我批评(群众路线)
2014/10/15 职场文书
身份证丢失证明
2015/06/19 职场文书
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript
Golang Web 框架Iris安装部署
2022/08/14 Python