一文教會你搭建vite項目并配置路由和element-plus
更新時間：2022年07月19日 10:09:04 作者：五號社會好青年
由于項目搭建過程實在繁瑣,容易遺忘,每次新建項目還得百度一下怎么搭建,所以寫下本文提醒自己,下面這篇文章主要給大家介紹了關(guān)于搭建vite項目并配置路由和element-plus的相關(guān)資料,需要的朋友可以參考下
1.創(chuàng)建項目
npm init vite@latest m-component -- --template vue-ts
2.安裝vite
npm i
3.啟動項目
npm run dev
4.可在vite.config.ts文件下修改端口號，默認為3030，我們可以改成習慣用的8080
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server:{
port:8080
}
})
5.安裝路由router和element-plus
npm i -S vue-router@next element-plus
可在package.json中查看下載的路由和element-plus配置信息
6.在src目錄下新建views和router文件夾，然后在router目錄下新建index.ts文件，在index.ts文件下配置路由
import { createRouter,createWebHistory,RouteRecordRaw } from "vue-router";
import Home from "../views/Home.vue"
const routes:RouteRecordRaw[] = [
{
path:'/',
component:Home
}
]
const router = createRouter({
routes,
history:createWebHistory()
})
export default router
在views目錄下新建一個Home.vue文件
<template>
<div>
首頁
</div>
</template>
<script lang="ts" setup>
</script>
<style lang="scss" scoped>
</style>
6.然后在main.ts中引入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
const app =createApp(App)
app.use(router)
app.mount('#app')
7.使用element-plus
在main.ts中引入使用
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app =createApp(App)
app.use(router).use(ElementPlus)
app.mount('#app')
在Home.vue中
<template>
<div>
<el-button>按鈕</el-button>
</div>
</template>
<script lang="ts" setup>
</script>
<style lang="scss" scoped>
</style>
8.在App.vue中編寫樣式
<template>
<router-view></router-view>
</template>
<style>
*{
margin: 0;
padding: 0;
}
</style>
這里使用的scss，需要先安裝sass 和sass-loader（*這是css的預處理器）
npm i -D sass sass-loader
附：vite引入element-plus修改主題色報錯
原因：引入文件路徑不對
解決：~改成node_modules/，安裝scss --dev，然后引入時去掉.scss/.css,完美運行
$--color-primary: #62c28c; /* 改變 icon 字體路徑變量，必需 */ $--font-path: "node_modules/element-plus/lib/theme-chalk/fonts"; @import "node_modules/element-plus/packages/theme-chalk/src/index";
總結(jié)
到此這篇關(guān)于搭建vite項目并配置路由和element-plus的文章就介紹到這了,更多相關(guān)vite搭建并配置路由element-plus內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了Vue使用element-ui實現(xiàn)菜單導航，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
vue-seamless-scroll無縫滾動組件使用方法詳解
這篇文章主要為大家詳細介紹了vue-seamless-scroll無縫滾動組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了Vue3異步組件Suspense的使用方法詳解,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue實現(xiàn)廣告欄上下滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
watch是Vue實例的一個屬性是用來響應數(shù)據(jù)的變化,需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時,這個方式是最有用的,下面這篇文章主要給大家介紹了關(guān)于vue中watch的實際開發(fā)筆記,需要的朋友可以參考下2022-11-11
Vue實現(xiàn)用戶自定義字段顯示數(shù)據(jù)的方法
今天小編就為大家分享一篇Vue實現(xiàn)用戶自定義字段顯示數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue 自定指令生成uuid滾動監(jiān)聽達到tab表格吸頂效果的代碼
這篇文章主要介紹了vue 自定指令生成uuid滾動監(jiān)聽達到tab表格吸頂效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09
使用VUE和webrtc-streamer實現(xiàn)實時視頻播放(監(jiān)控設備-rtsp)
WebRTC-streamer是一項使用簡單機制通過WebRTC流式傳輸視頻捕獲設備和RTSP源的實驗,下面這篇文章主要給大家介紹了關(guān)于如何使用VUE和webrtc-streamer實現(xiàn)實時視頻播放(監(jiān)控設備-rtsp)的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue3中使用router路由實現(xiàn)跳轉(zhuǎn)傳參的方法
這篇文章主要介紹了vue3中使用router路由實現(xiàn)跳轉(zhuǎn)傳參的方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了詳解vuex的簡單todolist例子,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07