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