快捷導(dǎo)航

一文教會(huì)你搭建vite項(xiàng)目并配置路由和element-plus

更新時(shí)間：2022年07月19日 10:09:04 作者：五號(hào)社會(huì)好青年

由于項(xiàng)目搭建過程實(shí)在繁瑣,容易遺忘,每次新建項(xiàng)目還得百度一下怎么搭建,所以寫下本文提醒自己,下面這篇文章主要給大家介紹了關(guān)于搭建vite項(xiàng)目并配置路由和element-plus的相關(guān)資料,需要的朋友可以參考下

1.創(chuàng)建項(xiàng)目
2.安裝vite
3.啟動(dòng)項(xiàng)目
4.可在vite.config.ts文件下修改端口號(hào)，默認(rèn)為3030，我們可以改成習(xí)慣用的8080
5.安裝路由router和element-plus
6.在src目錄下新建views和router文件夾，然后在router目錄下新建index.ts文件，在index.ts文件下配置路由
6.然后在main.ts中引入
7.使用element-plus
8.在App.vue中編寫樣式
附：vite引入element-plus修改主題色報(bào)錯(cuò)
總結(jié)

1.創(chuàng)建項(xiàng)目

npm init vite@latest m-component -- --template vue-ts

2.安裝vite

npm i

3.啟動(dòng)項(xiàng)目

npm run dev

4.可在vite.config.ts文件下修改端口號(hào)，默認(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ò)

原因：引入文件路徑不對(duì)

解決：~改成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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: