Vue中import與@import的區(qū)別及使用場景說明
import與@import的區(qū)別及使用場景
import
script中的import是js的語法, 是在js中去引用css文件
(ES6)模塊化規(guī)范：默認導(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)文章
vue之a(chǎn)-table中實現(xiàn)清空選中的數(shù)據(jù)
今天小編就為大家分享一篇vue之a(chǎn)-table中實現(xiàn)清空選中的數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了Vue3中進行頁面局部刷新組件刷新的操作方法,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue3.0中的monorepo管理模式的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue循環(huán)中點擊選中再點擊取消(單選)的實現(xiàn)
這篇文章主要介紹了vue循環(huán)中點擊選中再點擊取消(單選)的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要為大家介紹了vue2項目增加eslint配置代碼規(guī)范示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
本文主要介紹了Vue操作數(shù)組的幾種常用方法小結(jié),主要包括map、filter、forEach、find 和 findIndex 、some 和 every、includes、Array.from這幾種方法,感興趣的可以了解一下2023-09-09
本篇文章主要介紹了vue渲染函數(shù)render的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
Vue2.0仿餓了么webapp單頁面應(yīng)用詳細步驟
本篇文章給大家分享了Vue2.0仿餓了么webapp單頁面應(yīng)用詳細步驟，有興趣的朋友可以跟著操作下。2018-07-07
Vue.js結(jié)合bootstrap實現(xiàn)分頁控件
這篇文章主要為大家詳細介紹了Vue.js 合bootstrap實現(xiàn)分頁控件的相關(guān)資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要給大家介紹了關(guān)于Vue中引入svg圖標(biāo)的兩種方式，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01