Vue中import与@import的区别及使用场景

import

script中的import是js的语法, 是在js中去引用css文件

(ES6)模块化规范：默认导入语法 import 接收名称 from '模块标识符’

使用

• 导入组件

import Vue from 'vue'

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

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

• 导入第三方插件

import Vant from 'vant'

• vue路由懒加载
  • 实现路由懒加载的步骤

    1. 安装 @babel/plugin-syntax-dynamic-import 包。
       npm install --save-dev @babel/plugin-syntax-dynamic-import

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

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

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

       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是stylus的语法，是在css中引用css文件

使用

• 导入css样式

@import './icon.less';'