vue文件html、css、js分离

vue文件默认格式如下

<template>
    html代码
</template>

<script>
    js代码
</script>

<style>
    css代码
</style>

1、全部分离

<template src="./main.html"></template>
<script src="./main.js"></script>
<style src="./main.scss"></style>

2、部分分离

<template>
    html内容
</template>
<script src="./main.js"></script>
<style src="./main.scss"></style>
或者
<style scoped lang="scss">
    @import url("./main.scss");
    @import "./main.scss";
</style>

全局引入

css
在main.js中引入import './main.css' 
//注意'./'一定要加不然会报错

js
第一种方式，在main中引入，在组件中使用
新建common.js

在main.js中引入
import common from '../static/common.js'  //注意路径
Vue.prototype.$common = common

在组件中使用
<script>
    export default {
        name: 'HelloWorld',
        data () {},
        created: function() {
            var that = this
            that.$common.log(2222222222222)
        }
    }
</script>


第二种方式，在组件中引入，在组件中使用
新建common.js

<script>
    import common from '../../static/common.js' //注意路径
    export default {
        name: 'HelloWorld',
        data () {},
        created: function() {
            var that = this
            common.log(111111111)
      }
}
</script>