Vue2之页面 、js 、css分离

在编写vue的时候，页面数据少的时候，可以将所有的js和css都可以直接写在页面上，但是页面数据多，js、css的方法和样式多的时候，都放在一个页面的时候，就显得页面vue十分的臃肿。

所以写项目的时候，还是将其分离会比较合适，这样别的页面也可以引用该方法和样式。

直接上代码：

 

页面引用js（TestJs.js）和css（Test.css）

复制代码<script> import test from '../pageJs/TestJs'; export default { ... test } </script>

1
2
3
4
5
6
<script>
import test from '../pageJs/TestJs';
export default {
... test
}
</script>

复制代码<style scoped> @import "../css/Test.css";</style>

1
2
<style scoped>

@import "../css/Test.css";
</style>

　js部分

复制代码export default { data() { return { test1: 'haha', test2: '腻害', test3: '你好啊，我只是测试一下' } } }

1
2
3
4
5
6
7
8
9
export default {
data() {
return {
test1: 'haha',
test2: '腻害',
test3: '你好啊，我只是测试一下'
}
}
}