How to separate css in vue

How to separate css in vue: first set "" in the vue file; then create a new index.js file; finally create The corresponding html, js and css files are enough.

The operating environment of this tutorial: Windows 7 system, Vue version 2.9.6. This method is suitable for all brands of computers.

Recommended related articles: vue.js

In normal creation and reference of vue files, html, css, and js are all together. Although it is easy to write like this It is convenient, but when the page is relatively large or there is a lot of code, even if you use components, there are sometimes more codes. In simple terms, the search is not conducive to programming, and in terms of image optimization performance. It is a good choice to separate the html, css, and js in the code.

First, set the following in the .vue file:

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

Create a new index.js file, as follows:

import record from './record.vue';
export default record;

Create the corresponding record.html, record.js, Record.scss file is enough. Take .js as an example:

// -- NAME --
const name = 'record';
// -- DATA --
const data = function () {
  return {
    
  };
};
// -- COMPUTED --
const computed = {
 
};
// -- COMPONENTS -- 
const components = {
}
// -- WATCH --
const watch = {
  
};
// -- METHODS --
const methods = { 
  
};
// -- HOOKS --
function mounted() {
}
// == EXPORT ==
export default {
  name: name,
  data: data,
  components: components,
  computed: computed,
  watch: watch,
  methods: methods,
  mounted: mounted
};

Another method can be directly quoted:

<template>
  <div>html</div>
</template>
<script src="./***.js"></script>
<style src="./***.css"></style>

There are various forms, but the basic idea is to separate independent files. Introduce loading

The above is the detailed content of How to separate css in vue. For more information, please follow other related articles on the PHP Chinese website!