ES6 import

import
import是ES6的语法；

使用
导入组件

import Vue from 'vue'

导入js、css、vue、less等文件

import login from '../views/login/login.vue'
import './styles/index.less'

导入第三方插件

import Vant from 'vant'

vue路由懒加载
实现路由懒加载的步骤
安装 @babel/plugin-syntax-dynamic-import 包。

npm install --save-dev @babel/plugin-syntax-dynamic-import

在 babel.config.js 配置文件中声明该插件。

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ],
    '@babel/plugin-syntax-dynamic-import'

  ]
}

将路由改为按需加载的形式，示例代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routes = [
//import具有变量提升机制，使用箭头函数限制作用域，实现懒加载
  { path: '/login', component: ()=> import('路由组件的路径') }
]

const router = new VueRouter({
  routes
})

export default router

@import
style中的@import是style的语法，是在css中引用css文件

使用
导入css样式

@import './icon.less';'