vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue import与@import的区别

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

作者:Wyyyy1024

这篇文章主要介绍了Vue中import与@import的区别及使用场景说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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';'

Vue中import from @是什么意思?怎么配置?

一般是在项目构建时生成的文件中定义@对应的属性值,表示将路径进行替换。

比如webpack构建项目,在webpack.config.js中:

而在vite构建的项目中,可以在vite.config.js中定义路径别名:

// vite.config.js 将@替换成./src
resolve: {
		alias: [
			{ find: /^~/, replacement: '' },
			{ find: '@', replacement: resolve(__dirname, './src') }
		]
	},

于是在其他页面中,使用时:

import {xxx} from '@/a/b/c'

注意,如果是typescript中,其配置文件在tsconfig.json中。

比如:

// /router/index.js
import Home from '@views/home/index.vue'

配置文件中:

// tsconfig.json
{
  "compilerOptions": {
    "target": xxx;
    "baseURL": "./",
    "paths": {
      "@/*": ["./src/*"]
},

这里compilerOptions表示配置typescript文件的编译选项,paths指定了.ts或者.vue文件中import选项时可以使用

import xx from '@xxx'

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文