分离JavaScript, CSS

单独创建Javascript和CSS文件，在vue文件中导入。

Vue

<!--
 * @Description: 测试
 -->
 <template>
    <div class="about" id="about" name="about">
      <div class="about-header">
        <div class="about-title" @click="test_alert">
          <i class="el-icon-tickets" style="color: #ff6700;"></i>
          {{ intro }}
        </div>
      </div>
      <div class="about-content">
      </div>
    </div>
  </template>
  <script>
  import Test from './test.js';
  export default {
    ...Test,
    components: {
    }
  };
  </script>
  <style scoped src="./test-style.css"></style>
  

JavaScript

export default {
    data() {
      return {
        intro: '关于我们',
      };
    },
    methods: {
      test_alert() {
        alert("hello world")
      }
    }
  };

封装请求

创建api文件夹，在api下创建不同应用的js文件如home.js, common.js等。

export function TestDeleteApi(data) {
  return request({
    url: '/api/test/delete_test',
    method: 'post',
    data
  })
}

在vue文件中引用

import {
 TestDeleteApi
} from '@/api/common.js';

发送请求

TestDelete() {
      TestDeleteApi({ id: 1}).then((res) => {
        console.log(res)
      });
},