vue html js css写在一起,vue文件html、css、js分离

vue文件默认格式如下

html代码

js代码

css代码

1、全部分离

2、部分分离

html内容

或者

@import url("./main.scss");

@import "./main.scss";

全局引入

css

在main.js中引入import './main.css'

//注意'./'一定要加不然会报错

js

第一种方式，在main中引入，在组件中使用

新建common.js

在main.js中引入

import common from '../static/common.js' //注意路径

Vue.prototype.$common = common

在组件中使用

export default {

name: 'HelloWorld',

data () {},

created: function() {

var that = this

that.$common.log(2222222222222)

}

}

第二种方式，在组件中引入，在组件中使用

新建common.js

import common from '../../static/common.js' //注意路径

export default {

name: 'HelloWorld',

data () {},

created: function() {

var that = this

common.log(111111111)

}

}