在app.html 或者*.vue中引入css,如下所示:
在 app.html引入css对阵个页面都生效,在vue文件中引入,只对改vue生成的页面有效
在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样式
以上是我在项目中遇到问题的一些解决方案,谢谢。