vue中导入外链css或js

JavaScript017

vue中导入外链css或js,第1张

在vue中导入自定义的css文件或js文件

css文件

在main.js中导入公共的css

import '../static/css/common.css' //引入公用css

在页面中引入单独css

<style scoped>

@import '../../static/css/header.css'

</style>

Js文件

自定义js 中写:

function title(t){

alert(t)

}

export {

title //多个方法在此处json中export出去

}

页面中使用:

<template>

<div>

<button class="btn" @click="clickme">click me</button>

</div>

</template>

<script>

import {title} from './js/common.js' //可以选择需要的方法引入

export default {

data(){

return{

}

},

methods:{

clickme(){

title('你点我了')

}

}

}

</script>

或者

import Comjs from './js/common.js' //引入公用js

Vue.prototype.$comjs = Comjs//添加到vue属性中

自定义js 中写:

const comjs = {

}

comjs.title = function (title) {

alert(title)

}

export default comjs

页面中使用:

<template>

<div>

<button class="btn" @click="clickme">click me</button>

</div>

</template>

<script>

export default {

data(){

return{

}

},

methods:{

clickme(){

this.$comjs.title('你点我了')

}

}

}

</script>

  走访了好几个移动框架,来回切换了几次,发现都不是很适合我使用,要么是组件不够用,要么是组件无法二次封装。我在自己的项目中大多是需要使用框架之样式,所以思来想去还是用比较熟悉的mui移动框架( 官方网址 )。但是mui是没法使用npm进行安装的(一大遗憾),思来想去于是将mui框架所需的js,css文件放在static目录下:

在index.html中以静态资源的方式进行引用。

当然想要在组件中直接使用mui这个变量,需要在build/webpack.base.conf.js文件中进行配置

如需引用mui框架的样式只需要引入mui中的class样式

以上是我在项目中遇到问题的一些解决方案,谢谢。

1.在components下面新建一个grid.vue的文件,在文件里放入内容

2.在css里新建一个grid.css文件,把grid.vue需要的样式放进来

3.在router里的index.js里import,import  文件名 from 文件存放的路径;并在routes下面写好路由

4.在main.js里引入grid.css的样式,import '路径名'