快捷導(dǎo)航

前端vue3搭建超詳細(xì)指南(快速上手搭建)

更新時(shí)間：2025年02月08日 10:30:10 作者：秋季的思念

這篇文章主要介紹了使用Vue?3和Element-plus搭建前端項(xiàng)目的過程,包括項(xiàng)目搭建、Element-plus安裝和引入、axios安裝、sass使用、app.vue配置、組件創(chuàng)新、路由配置以及使用輔助插件來提高開發(fā)效率,需要的朋友可以參考下

一、項(xiàng)目搭建和運(yùn)行

1.選擇在哪個(gè)文件夾創(chuàng)建

(我在D盤新建的前端項(xiàng)目->cd 前端項(xiàng)目或者直接用idea直接打開該文件夾)

cd /
cd 前端項(xiàng)目

2.創(chuàng)建vue項(xiàng)目

npm create vue@latest

3.在該路徑下創(chuàng)建我的項(xiàng)目文件名

(這里我的名稱是VueProject，給自己項(xiàng)目起個(gè)名稱)

VueProject(項(xiàng)目名稱大寫的話會(huì)讓你選擇包，直接回車就行，或者直接使用小寫名稱vueProject)

 VueProject

4.配置選擇

其中路由Vue Router、全局Pinia和代碼格式化工具Prettier是需要的選是，ES檢查打開后會(huì)檢查代碼質(zhì)量(自己開發(fā)的話不建議打開會(huì)增加額外的調(diào)整) ，其它的暫時(shí)不需要

5.切換到我項(xiàng)目的路徑

cd VueProject

6.安裝項(xiàng)目依賴包

npm install

7.啟動(dòng)運(yùn)行

(npm run dev或者右擊package.json->顯示npm腳本->點(diǎn)擊dev)

npm run dev

搭建截圖如下：

運(yùn)行截圖如下：

二、Elememt-plus的安裝和引入

1.安裝組件庫和圖標(biāo)庫

npm install element-plus  //安裝 Element Plus 組件庫
npm install @element-plus/icons-vue //安裝 Element Plus 的圖標(biāo)庫

2.在main.js中引入

//引入 Element Plus 組件庫及其樣式文件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//引入 Element Plus 的所有圖標(biāo)庫
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

3.引入完注冊(cè)

(在app.mount('#app')前面)

app.use(ElementPlus)  //將 Element Plus 注冊(cè)為 Vue 應(yīng)用的插件，使其所有組件在應(yīng)用中可用
//循環(huán)遍歷 ElementPlusIconsVue 對(duì)象中的所有圖標(biāo)組件，并將每個(gè)圖標(biāo)組件注冊(cè)到 Vue 應(yīng)用中
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

命令截圖如下：

main.js截圖如下：

三、axios的安裝

1.安裝

npm install axios

2.引入

(在main.js中配置,8080為后端的端口,獲取數(shù)據(jù)用的,看后端啟動(dòng)使用的端口是哪個(gè))

import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:8080'

四、sass安裝

(拓展了css,允許嵌套寫法，可以更清晰地表示層級(jí)結(jié)構(gòu),<style scoped lang="scss">)

npm install sass

五、app.vue配置一級(jí)路由出口

(這里只是做了個(gè)樣子,頭部導(dǎo)航不是固定格式，可根據(jù)自己需求調(diào)整,其中一級(jí)出口<RouterView/>是必要的)

<template>
  <div>
    <!--頭部導(dǎo)航-->
    <!--<Header/>-->
    <!--主要內(nèi)容顯示 一級(jí)路由出口-->
    <div class="content">
      <RouterView #default="{ Component }">
        <!--生命周期-->
        <transition name="fade" >
          <component :is="Component" />
        </transition>
      </RouterView>
    </div>
  </div>
</template>
<script setup>
import {RouterView} from "vue-router";
/*import Header from "@/views/Header.vue";*/
</script>
<style scoped lang="scss">
</style>

六、刪掉沒用的組件，創(chuàng)新組件

1.刪除vue組件

2.css內(nèi)容清空

(該步驟可將默認(rèn)css全部清空或者把a(bǔ)pp.vue的全局樣式引入import './assets/main.css'刪了,建議刪main.css里面的全部初始樣式)

3.新建目錄

4.新建組件

5.命名

6.寫入內(nèi)容

七、路由配置

(可直接拷貝進(jìn)去)

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/:pathMatch(.*)*',
      redirect: '/login'
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('../views/Login/HomePage.vue')
    }
  ],
})
export default router

截屏如下：