Vue中import與@import的區(qū)別及使用場景說明
import與@import的區(qū)別及使用場景
import
script中的import是js的語法, 是在js中去引用css文件
(ES6)模塊化規(guī)范：默認(rèn)導(dǎo)入語法 import 接收名稱 from '模塊標(biāo)識(shí)符’
使用
導(dǎo)入組件
import Vue from 'vue'
導(dǎo)入js、css、vue、less等文件
import login from '../views/login/login.vue' import './styles/index.less'
導(dǎo)入第三方插件
import Vant from 'vant'
vue路由懶加載
實(shí)現(xiàn)路由懶加載的步驟
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具有變量提升機(jī)制，使用箭頭函數(shù)限制作用域，實(shí)現(xiàn)懶加載
{ path: '/login', component: ()=> import('路由組件的路徑') }
]
const router = new VueRouter({
routes
})
export default router@import
style中的@import是stylus的語法，是在css中引用css文件
使用
導(dǎo)入css樣式
@import './icon.less';'
Vue中import from @是什么意思？怎么配置？
一般是在項(xiàng)目構(gòu)建時(shí)生成的文件中定義@對(duì)應(yīng)的屬性值，表示將路徑進(jìn)行替換。
比如webpack構(gòu)建項(xiàng)目，在webpack.config.js中:
而在vite構(gòu)建的項(xiàng)目中，可以在vite.config.js中定義路徑別名：
// vite.config.js 將@替換成./src
resolve: {
alias: [
{ find: /^~/, replacement: '' },
{ find: '@', replacement: resolve(__dirname, './src') }
]
},于是在其他頁面中，使用時(shí)：
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文件的編譯選項(xiàng)，paths指定了.ts或者.vue文件中import選項(xiàng)時(shí)可以使用
import xx from '@xxx'
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue之a(chǎn)-table中實(shí)現(xiàn)清空選中的數(shù)據(jù)
今天小編就為大家分享一篇vue之a(chǎn)-table中實(shí)現(xiàn)清空選中的數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了Vue3中進(jìn)行頁面局部刷新組件刷新的操作方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
Vue3.0中的monorepo管理模式的實(shí)現(xiàn)
這篇文章主要介紹了Vue3.0中的monorepo管理模式的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue循環(huán)中點(diǎn)擊選中再點(diǎn)擊取消(單選)的實(shí)現(xiàn)
這篇文章主要介紹了vue循環(huán)中點(diǎn)擊選中再點(diǎn)擊取消(單選)的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue2項(xiàng)目增加eslint配置代碼規(guī)范示例
這篇文章主要為大家介紹了vue2項(xiàng)目增加eslint配置代碼規(guī)范示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
本文主要介紹了Vue操作數(shù)組的幾種常用方法小結(jié),主要包括map、filter、forEach、find 和 findIndex 、some 和 every、includes、Array.from這幾種方法,感興趣的可以了解一下2023-09-09
本篇文章主要介紹了vue渲染函數(shù)render的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
Vue2.0仿餓了么webapp單頁面應(yīng)用詳細(xì)步驟
本篇文章給大家分享了Vue2.0仿餓了么webapp單頁面應(yīng)用詳細(xì)步驟，有興趣的朋友可以跟著操作下。2018-07-07
Vue.js結(jié)合bootstrap實(shí)現(xiàn)分頁控件
這篇文章主要為大家詳細(xì)介紹了Vue.js 合bootstrap實(shí)現(xiàn)分頁控件的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要給大家介紹了關(guān)于Vue中引入svg圖標(biāo)的兩種方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01