vue项目中引入外部css以及js文件的方法
来源:互联网 发布:php 判断是否刷新页面 编辑:程序博客网 时间:2024/06/15 14:49
在使用vue做项目的时候,我们一般不将css样式写到各自的组件里,这样不仅会让代码冗余,而且不美观整洁。如果你定义了一些外部css文件,如何引入到vue组件中去呢?我们这里使用ES6的引入方式:
<template></template>
<style scoped>
@import "../assets/common/common.css";
</style>
那么JS文件如何引入呢?如果需要全局使用,则可以在main.js中引用并实例化对象:
部分js代码:
const DEBUG = true;
let BASE_URL = DEBUG ? 'url' : '';
const API = {
//网关设备管理
'edgeManager':{
'deviceList':BASE_URL + '/devicemanager/device/list.do',//网关设备列表
'deviceDelete':BASE_URL + '/devicemanager/device/delete.do'//网关设备删除
}
}
export default API;
在main.js中:
import API from './assets/api/api.config.js'
Vue.prototype.$API = API;
这样,我们在vue组件中使用this.$API就可以找到这个js文件中的对象了。
如:this.$API.edgeManager.deviceList
如果需要按需引入,不在main.js中引入,直接在有需要的vue组件中引入:
部分代码:
<template></template>
<script>
import API from '../../assets/api/api.config.js'
</script>
这样引入的话,我们在当前组件可以直接使用API去找到这个js文件中的对象。
如:API.edgeManager.deviceList
需要注意的是,第二种方式按需引入的js文件在其他组件中是找不到这个对象的。
欢迎交流探讨,希望本篇文章对你有所帮助。
- vue项目中引入外部css以及js文件的方法
- Vue-cli项目中引入外部/第三方css/js/less文件具体步骤
- 网页中引入外部js,css文件出现的问题
- 在HTML中引入外部文件CSS和JS的方法
- 引入外部css ,js文件
- HTML引入外部JS文件的方法
- vue项目导入外部css样式和js文件
- 引入外部CSS文件和JS文件
- vue-cli搭建的项目引入.css文件报错
- 引入外部JS或CSS文件的写法
- 如何在CodeIgniter中引入外部的JS和CSS文件
- jsp引入js,css文件的方法
- html 中引入js css的方法
- HTML中引入外部CSS和JS
- jQuery中getScript方法引入外部js文件,乱码处理(自己遇到的问题)
- 在Vue项目中引入D3.js
- laravel5中 blade模板引入项目中的css js文件
- 在vue项目中引入highcharts图表的方法
- 1英寸CMOS到底多大?
- Mac 下清理硬盘空间大小 很实用哦。
- Sublime Text 3 的java代码中有中文,用cmd中运行时出现中文乱码
- 一个多年安卓开发者的一些感悟与忠告
- 51nod 1515 明辨是非 && 2017百度之星初赛第一场第二题(并查集+启发式合并)
- vue项目中引入外部css以及js文件的方法
- Java POI 导入Excel
- 【算法】之直接插入排序
- Unity之GPS定位详解
- 查看或修改Git的用户名和邮箱
- 剑指Offer-数组全排列
- Div+Css布局--frameSet布局
- Hoxx vpn
- Python 类的定义和实例化,类继承