An introduction to several import methods commonly used in VUE (modules, files)

This article mainly introduces in detail several import methods commonly used in VUE (modules, files). The content is quite good. I will share it with you now and give it as a reference.

1 Introducing third-party plug-ins

import echarts from 'echarts'

2 Introducing tool classes

The first is to introduce a single method

import {axiosfetch} from './util';

The following is the writing method, which needs to be exported

export function axiosfetch(options) {

}

The second method of importing groups

import * as tools from './libs/tools'

There are multiple export methods in tools.js, and all exports in tools How to use the method imported into

vue?

Vue.prototype.$tools = tools

Just call this.$tools.method directly

Speaking of export and export default What's the difference?

Let’s take a look at the difference

First, export

import {axiosfetch} from './util'; 
 //需要加花括号 可以一次导入多个也可以一次导入一个，但都要加括号

If there are two methods

import {axiosfetch,post} from './util';

Then export default

import axiosfetch from './util'; //不需要加花括号 只能一个一个导入

3 .Import the css file

import 'iview/dist/styles/iview.css';

If it is in the .vue file, then put a style outside it

<style>
 @import &#39;./test.css&#39;; 

</style>

4. Import components

 import name1 from './name1'
import name2 from './name2'
  components:{
     name1,
     name2,
  },

The above is the entire content of this article, I hope it will be useful for everyone’s learning For help, please pay attention to the PHP Chinese website for more related content!

Related recommendations:

JQuery prevents event bubbling instance analysis

About vue’s ideas for solving cross-domain routing conflicts

Introduction to Vue dynamically setting routing parameters

The above is the detailed content of An introduction to several import methods commonly used in VUE (modules, files). For more information, please follow other related articles on the PHP Chinese website!