说明

一般是不拆分的，模板和js、css写在同一个 .vue 文件中

但是，如果代码量较多，就会变得复杂，改动也不容易，就要考虑拆分

拆分css

创建目录

在 src 下创建 css 文件夹

创建css文件

在 css 文件夹创建 .css 文件

移动css代码

将 .vue 文件中的 css代码，移动到 .css 文件中

全局引入css（不推荐）：

.vue 文件 引入 .css 文件

注意：是全局引入 css，会干扰其他样式

<style scoped>
@import '../css/PingTai.css'

</style>

局部引入css：

<style src="../css/PingTai.css" scoped></style>

注意1： <style> 标签中没有 src 属性，此用法只能在 vue 工程中

注意2： scoped 表示局部引入，不会干扰其他样式

拆分js

创建目录

在 src 下创建 js 文件夹

创建css文件

在 js 文件夹创建 .js 文件

移动js代码

将 .vue 文件中的 js代码，移动到 .js 文件中

引入js 方式一：

.vue 文件 引入 .js 文件

<script>
//导入
import  PingTaiView   from '../js/PingTai.js'

export default{
    ... PingTaiView
}

</script>

…PingTaiView 的意思

相当于下面写法：

export default{
    name:PingTaiView.name,
    components:PingTaiView.components,
    data:PingTaiView.data,
    mounted:PingTaiView.mounted,
    methods:PingTaiView.methods,
}

引入js 方式二：

.vue 文件 引入 .js 文件

<script src="../js/PingTai.js" type="text/javascript" charset="utf-8"></script>

注意：

该行代码下面不能再有 <script>，如：

<script>
console.log(111)
</script>

会导致上面的 PingTai.js 中的代码不执行

原文出处：/show_1IX6o5EvZjjP.html