一文教會你搭建vite項目并配置路由和element-plus
更新時間：2022年07月19日 10:09:04 作者：五號社會好青年
由于項目搭建過程實在繁瑣,容易遺忘,每次新建項目還得百度一下怎么搭建,所以寫下本文提醒自己,下面這篇文章主要給大家介紹了關于搭建vite項目并配置路由和element-plus的相關資料,需要的朋友可以參考下
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";
總結
到此這篇關于搭建vite項目并配置路由和element-plus的文章就介紹到這了,更多相關vite搭建并配置路由element-plus內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
最近開發(fā)了一個功能,頁面首頁會加載大量的圖片,初次進入頁面時,會導致頁面性能下降,于是乎,我改進了這個功能,可以讓所有圖片自動懶加載,文中有詳細的代碼示例,需要的朋友可以參考下2023-09-09
詳解vuex中action何時完成以及如何正確調用dispatch的思考
這篇文章主要介紹了詳解vuex中action何時完成以及如何正確調用dispatch的思考，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
Vue局部組件數(shù)據(jù)共享Vue.observable()的使用
隨著組件的細化，就會遇到多組件狀態(tài)共享的情況，今天我們介紹的是 vue.js 2.6 新增加的 Observable API ，通過使用這個 api 我們可以應對一些簡單的跨組件數(shù)據(jù)狀態(tài)共享的情況，感興趣的可以了解一下2021-06-06
正常情況下Vue推薦用props向子組件參數(shù),但是在特定場景下,使用$attrs會更方便,下面這篇文章主要給大家介紹了關于vue2.x中$attrs使用的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
van-uploader保存文件到后端回顯后端接口返回的數(shù)據(jù)
前端開發(fā)想省時間就是要找框架呀,下面這篇文章主要給大家介紹了關于van-uploader保存文件到后端回顯后端接口返回的數(shù)據(jù),文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了this在vue和小程序中的使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-01-01
這篇文章主要給大家介紹了關于Vue數(shù)據(jù)雙向綁定的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-11-11
這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)立體計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
vue checkbox 全選 數(shù)據(jù)的綁定及獲取和計算方法
下面小編就為大家分享一篇vue checkbox 全選 數(shù)據(jù)的綁定及獲取和計算方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue-cli提供的腳手架只是一個最基礎的，也可以說是Vue團隊認為的工程結構的一種最佳實踐。這篇文章主要介紹了vue-cli的工程模板與構建工具 ,需要的朋友可以參考下2018-09-09