Vue中import與@import的區(qū)別及使用場景說明
import與@import的區(qū)別及使用場景
import
script中的import是js的語法, 是在js中去引用css文件
(ES6)模塊化規(guī)范：默認(rèn)導(dǎo)入語法 import 接收名稱 from '模塊標(biāo)識符’
使用
導(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路由懶加載
實現(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具有變量提升機制，使用箭頭函數(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 @是什么意思？怎么配置？
一般是在項目構(gòu)建時生成的文件中定義@對應(yīng)的屬性值，表示將路徑進行替換。
比如webpack構(gòu)建項目，在webpack.config.js中:
而在vite構(gòu)建的項目中，可以在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'
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
如何使用 vxe-table 實現(xiàn)左邊是樹右邊是表格聯(lián)動功能
使用 vxe-table 來實現(xiàn)左邊是樹,右邊是表格聯(lián)動功能,當(dāng)需要實現(xiàn)左右兩側(cè)聯(lián)動時,表格 vxe-grid 配合分割模板 vxe-split 就很容易實現(xiàn)了,下面通過實例代碼給大家介紹使用 vxe-table 來實現(xiàn)左邊是樹,右邊是表格聯(lián)動功能,感興趣的朋友一起看看吧2025-03-03
部分項目需要地圖的嵌入，這篇文章主要介紹了vue項目中調(diào)用百度地圖API使用方法，其他的地圖調(diào)用與之類似，有需要的朋友可以借鑒參考下，希望能夠有所幫助2022-04-04
vue?openlayers實現(xiàn)臺風(fēng)軌跡示例詳解
這篇文章主要為大家介紹了vue?openlayers實現(xiàn)臺風(fēng)軌跡示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了vue中的v-touch事件用法說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
vue路由跳轉(zhuǎn)router-link清除歷史記錄的三種方式(總結(jié))
這篇文章主要介紹了vue路由跳轉(zhuǎn)router-link清除歷史記錄的三種方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue任意關(guān)系組件通信與跨組件監(jiān)聽狀態(tài)vue-communication
這篇文章主要介紹了vue任意關(guān)系組件通信與跨組件監(jiān)聽狀態(tài)vue-communication，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
這篇文章主要為大家詳細介紹了VUE使用draggable實現(xiàn)組件拖拽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家介紹了一款mapbox gl開箱即用的地圖引擎庫，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
Vue.js是前端三大框架之一,以其輕巧、高性能的特性脫穎而出,Vue.js專注于構(gòu)建數(shù)據(jù)驅(qū)動的Web界面,采用漸進式設(shè)計,易于上手,支持組件化開發(fā),核心功能包括響應(yīng)式數(shù)據(jù)綁定和視圖組件的組合,Vue還提供了生命周期、事件綁定等多種功能,支持ES6語法2024-09-09
vue2使用el-date-picker實現(xiàn)動態(tài)日期范圍demo
這篇文章主要為大家介紹了vue2使用el-date-picker實現(xiàn)動態(tài)日期范圍示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06