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 相关文章推荐
javascript 拖放效果实现代码
Jan 22 Javascript
浅谈document.write()输出样式
May 07 Javascript
JavaScript中的anchor()方法使用详解
Jun 08 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
Javascript数组Array基础介绍
Mar 13 Javascript
JS实现列表的响应式排版(推荐)
Sep 01 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
微信小程序框架wepy之动态控制类名
Sep 14 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 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
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
解析php时间戳与日期的转换
2013/06/06 PHP
php中文验证码实现方法
2015/06/18 PHP
php实现的操作excel类详解
2016/01/15 PHP
php反射类ReflectionClass用法分析
2016/05/12 PHP
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
AngularJs expression详解及简单示例
2016/09/01 Javascript
jQuery日程管理插件fullcalendar使用详解
2017/01/07 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
python实现浪漫的烟花秀
2019/01/30 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
如何使用python操作vmware
2019/07/27 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
python 模拟登陆163邮箱
2020/12/15 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
材料工程专业毕业生求职信
2014/03/04 职场文书
信访工作经验交流材料
2014/05/23 职场文书
瘦西湖导游词
2015/02/03 职场文书
出国留学单位推荐信
2015/03/26 职场文书
linux目录管理方法介绍
2022/06/01 Servers