Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

Hello! # Vue Gaudamap’s PC version of # Vue Gaudamap’s PC version of # Vue Gaudamap’s PC version of # Vue Gaudamap’s PC version of # Vue Gaudamap’s PC version of # Vue Gaudamap’s PC version of # Vue Gaudamap’s PC version of # Vue Gaudamap’s PC version of # Vue Gaudamap I don’t know if I wrote the article is not easy to understand; Hope you can give more suggestions, thank you! Today’s article is about Vue export import; On the Internet to find a lot of relevant articles or documents summed up; Hopefully useful to you;

The text begins

Pay attention!

(1) import Import dependent packages instead of relative paths when importing file paths. For example: import Vue from ‘Vue ‘; , but the introduction of their own written file, is relative to the path. For example: import lib from ‘./lib.js’; .

(2) Import with curly braces and without curly braces: if it is exported by export, it is exported by export defalut

Syntax for export and import

A module is a separate file. All variables inside the file are not available externally. If you want a variable that can be read externally from inside a module, use the export keyword to output that variable.

After using the export command to define the external interface of the module, other JS files can load the module through the import command

Name the import/export

export const name = 'value' import { name } from '... 'Copy the code

Default export/import

export default 'value' import anyName from '... 'Copy the code

Rename the import/export

export { name as newName } import { newName } from '... 'Copy the code

Name + default | Import All

export const name = 'value' export default 'value' import * as anyName from '... 'Copy the code

Export list + rename

export { name1,name2 as newName2} import { name1 as newName1,newName2} from '... 'Copy the code

Introducing third-party plug-ins

import Vue from 'vue'

import App from './App.vue'
Copy the code

Importing a CSS File

import 'swiper/swiper-bundle.css'

import './assets/css/reset.scss'
Copy the code

Introduce CSS differences between script and style tags

App.vue: import "./style/reset. SCSS "from app. vue: import "./style/reset. SCSS" from app. vue: import "./style/reset. SCSS "from app. vueCopy the code

If it is in a.vue file, you need to wrap a style around it

<style> @import './assets/css/reset.scss' </style>
Copy the code

Imported components

import MyEmpty from '@/components/MyEmpty.vue'

import trainItem from '@/components/trainItem' components:{ MyEmpty,trainItem },
Copy the code

Introducing utility classes

Import {isArray} from './util'; Export function isArray(options) {}Copy the code
Import * as utils from './libs/utils' //utils. Js has multiple export methods. Prototype.$utils = utils // call this.$utilsCopy the code

Introduce the UI component framework

// Import Vue from 'Vue '; import ElementUI from 'element-ui'; Vue.use(ElementUI); // Import Vue from 'Vue' on demand; import { Pagination,Dialog,Autocomplete,Dropdown} from 'element-ui'; Vue.use(Pagination); Vue.use(Dialog); Vue.use(Autocomplete); Vue.use(Dropdown);Copy the code

Use install instead of Vue

export default{ install(Vue, options){ ........... }}Copy the code

We can use the wildcard * to import external modules:

import * as objs from "./lib";
Copy the code

The module specification

JS modular programming is divided into two specifications: CommonJS module specification and ES6 module specification.

The CommonJS specification exports the interface as module.exports and imports the module as require

In the ES6 standard specification, export commands are used to export interfaces and import modules

In Node.js programming, the Node module system follows the CommonJS specification.

conclusion

Well, that’s the end of this article; Anyone who can see this must be a bigwig if not now a bigwig in the future; Finish reading a new handwritten article, indicating that you have a large pattern oh! Again, be sure to give suggestions; New written essays always have flaws;

“Welcome to the discussion in the comments section. The excavation authorities will draw 100 nuggets in the comments section after project Diggnation. See the event article for details.”