快捷導(dǎo)航

詳解Vue3框架的搭建及工程目錄

更新時間：2025年03月15日 10:48:36 作者：墨染夜雨箋

文章介紹了如何使用Node.js搭建Vue工程,并對Vue工程目錄進行了詳細解讀,包括各種文件夾和文件的作用,此外,還講解了如何設(shè)置網(wǎng)頁標題和全局樣式,以及如何配置路由,感興趣的朋友一起看看吧

安裝軟件Node.js

安裝完成后，打開cmd,查看環(huán)境是否準備好

node -v
npm -v

npm使用之前一定要配置淘寶鏡像源

npm config set https://registry.npmmirror.com

查看鏡像

npm config get registry

鏡像可能會變，如果改變通過網(wǎng)上查找最新

搭建Vue工程

vue.js官網(wǎng)：https://cn.vuejs.org

vue.js快速上手頁面：https://cn.vuejs.org/guide/quick-start.html

前提條件：

使用命令行查看node.js版本

node -v

新建一個文件夾，在文件夾上方搜索欄輸入cmd打開當前目錄下的cmd窗口

這種打開方式是非管理員方式，如果執(zhí)行命令時報錯，那就是權(quán)限問題，就要使用管理員身份運行。

管理員身份運行cmd:

搜索cmd,點擊以管理員身份運行

這時候管理員身份打開的是C盤文件夾，我們需要通過cd xxx的方式轉(zhuǎn)到項目所在文件夾。

①先輸入D:，轉(zhuǎn)到D盤盤符

然后復(fù)制項目所在文件夾的路徑，在cmd窗口輸入cd,然后再空格，最后粘貼路徑，再回車

在這個目錄下，我們就可以使用命令創(chuàng)建Vue工程及后續(xù)操作了。

創(chuàng)建Vue工程

使用命令創(chuàng)建Vue工程：

npm create vue@latest

然后根據(jù)提示運行提供的三行命令

cd vue-project,npm install(也可以簡寫成npm i),npm run dev

正常啟動后，根據(jù)系統(tǒng)提供的Local地址，去瀏覽器打開相應(yīng)的頁面

在命令行頁面按兩次Ctrl+C關(guān)閉正在運行的Vue工程

精簡Vue項目文件

在IDEA打開相應(yīng)的文件夾，刪掉一些文件及文件夾，精簡項目文件

在IDEA中打開package.json(依賴文件），點擊"dev":"vite"旁邊的按鈕，執(zhí)行啟動，相當于命令行中的npm run dev

編碼配置，改為UTF-8,改完一定要Save或Apply

在Inspections—>輸入Vue,將原先打勾全部取消勾選，這樣就沒有紅色波浪線的提示。

刪除相關(guān)文件，將選中的文件刪掉（按住Ctrl,然后點擊相關(guān)文件）

由于刪除了某些文件，因此很多文件的代碼也要更改

①HomeView.vue

這是原先樣式：

由于TheWelcome.vue刪除了，這里面import要刪除，同時template中的main也要刪除

最后，HomeView.vue改名為Home.vue

<template>
<div>
  主頁
</div>
</template>
<script setup>
</script>

②App.vue

然后來到App.vue，這里面的原先頁面是這樣，也需要進行刪除和精簡

刪除無用代碼后的頁面：

<template>
  <RouterView />
</template>

③router目錄下的index.js

修改后的文件：

import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: import('../views/Home.vue'),
    },
  ],
})
export default router

④main.js

之前main.css刪除了，這里也需要刪除import

修改后的代碼：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')

現(xiàn)在修改完成后，重新啟動，如果出現(xiàn)這樣的頁面，有出現(xiàn)訪問路徑，說明修改得沒問題

在瀏覽器打開就是這樣一個頁面，后續(xù)可以根據(jù)自己的需求再添加代碼，讓頁面更豐富。

Vue工程目錄的解讀

Vue工程下面有很多文件夾和文件，下面說明一下他們的作用

node_modules:不是源碼文件，是依賴包下載后的存放目錄。

public:存放全局靜態(tài)文件，比如說網(wǎng)頁的icon

很多網(wǎng)頁有這種小圖標（icon文件），這個就要放public后才會顯示

src:

assets:存放代碼引用的靜態(tài)文件,比如：css,js,img
- css：存放全局或組件相關(guān)的樣式文件
- js：存放全局或組件相關(guān)的JavaScript文件
- img：存放圖片資源（建議進一步細分，如img/icons、img/backgrounds等）
- fonts：存放字體文件（如.ttf、.woff等）
- 其他資源：如svg、json等靜態(tài)文件
components:放vue的組件(可復(fù)用的代碼塊，就叫組件），是代碼復(fù)用的核心目錄。
- 每個組件應(yīng)包含.vue文件（或單獨的.js、.css文件）
- 組件可以分為公共組件（如按鈕、表單、導(dǎo)航欄）和業(yè)務(wù)組件（如用戶的個性化組件）
router:定義路由的目錄，用于管理應(yīng)用的導(dǎo)航和頁面跳轉(zhuǎn)
- index.js：路由的核心配置文件，定義路由路徑（如/login、/about）以及對應(yīng)的組件
- 支持按需加載路由（lazy-load）或拆分路由文件（如auth.js、pages.js等）
views:存放vue網(wǎng)頁文件的目錄
- 每個視圖組件對應(yīng)一個完整的頁面（如LoginPage.vue、AboutPage.vue）
- 視圖組件通過路由進行導(dǎo)航
App.vue:vue頁面全局的入口，所有vue網(wǎng)頁進入時都需要先經(jīng)過它。所有vue文件的父級。
- 通常包含全局的組件（如導(dǎo)航欄、側(cè)邊欄、底部欄）
- 提供路由出口（<router-view>）以渲染子頁面
- 可以包含全局的狀態(tài)管理（如 Vuex 的狀態(tài)）
main.js:代碼的配置文件,引入第三方的組件或者我們自己定義的組件，js,css等。
- 引入Vue和相關(guān)插件（如Vue Router、Vuex）
- 引入組件庫（如Element UI、Ant Design Vue等）
- 注冊全局組件或指令
- 創(chuàng)建并導(dǎo)出Vue實例

index.html:vue編譯成網(wǎng)頁才能在瀏覽器渲染,是 Vue 應(yīng)用的起點，瀏覽器加載這個文件后，Vue 才能開始工作。

jsconfig.json:內(nèi)部配置文件

package.json:定義依賴庫的文件

package-lock.json:下載依賴的時候鎖定版本的一個文件(固定版本，防止用戶啟動后又修改）

vite.config.js:全局的配置文件（Vue3是基于vite的工具來配置的，配置端口之類的，比如我可以配置端口8080，這樣啟動時就使用8080端口，而不是分配的5173端口）

網(wǎng)頁標題的設(shè)置

在index.html中修改title標簽即可改變網(wǎng)頁標題

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico" rel="external nofollow" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--      網(wǎng)頁標題-->
    <title>springboot-vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

設(shè)置全局樣式

在src/assets文件夾下面新建文件夾css,css文件夾中新建一個global.css

在global.css添加代碼(用于消除邊距）

*{
    box-sizing: border-box;
}
body{
    margin: 0;
    padding: 0;
    color: #333;
    font-size: 14px;
}
a{
    text-decoration: none;
}

然后在main.js中引入global.css

import './assets/css/global.css'

路由配置

配置404頁面，很多時候網(wǎng)頁并沒有那個路由，用戶訪問的時候就要跳出404頁面提示用戶網(wǎng)頁不存在

首先在assets目錄新建目錄imgs,然后將圖片放到該目錄下

在views文件夾下新建一個404.vue,然后寫相應(yīng)的代碼

<template>
<div style="height: 100vh;display: flex;align-items: center;justify-content: center;">
  <div style="width: 50%">
  <img style="width: 100%" src="@/assets/imgs/404.png" alt="">
  <div style="text-align: center;font-size: 20px;color: #0e1986;padding: 20px 0;"><a href="/" rel="external nofollow"  rel="external nofollow" >返回主頁</a></div>
  </div>
</div>
</template>
<script setup lang="ts">
</script>

<template>
<div style="height: 100vh;display: flex;align-items: center;justify-content: center;">
  <div style="width: 35.5%">
  <img style="width: 100%" src="@/assets/imgs/404.jpg" alt="">
  <div style="text-align: center;font-size: 20px;color: #0e1986;padding: 20px 0;"><a href="/" rel="external nofollow"  rel="external nofollow" >返回主頁</a></div>
  </div>
</div>
</template>
<script setup lang="ts">
</script>