一、新建vue項(xiàng)目

（一）交互式指令創(chuàng)建vue項(xiàng)目

1.新建文件夾：

vue3測(cè)試項(xiàng)目---代碼---code2025

2.用cmd打開(kāi)命令行

cd code2025
npm create vue@latest
y

再根據(jù)圖片內(nèi)選擇 ：否、不需要

驗(yàn)證是否成功：

繼續(xù)：

cd vue
npm i

npm run dev

自動(dòng)跳轉(zhuǎn)得到：

打開(kāi)你顯示出來(lái)的Local:  http://localhost:5173/

二、在idea啟動(dòng)vue工程

1.刪除無(wú)用文件

劃線的刪去

2.關(guān)閉vue：

回到CMD命令行，按住ctrl + C 兩次

3.啟用vue工程

4.配置編碼：

5.繼續(xù)刪除無(wú)用文件：

刪除import XXXXX:

代碼如下：

<template>
  <div>
    主頁(yè)
  </div>
</template>

<script setup>

</script>

6.改名與刪除配置

HomeView.vue改名Home.vue：

最終如圖：

APP.vue刪除無(wú)用的代碼，只保留

<template>
  <RouterView />
</template>

繼續(xù)刪除無(wú)用文件：

打開(kāi)code2025---vue---src---router---index.js更改，看不懂的直接復(fù)制我的代碼即可，如下

import { createRouter, createWebHistory } from 'vue-router'

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

export default router

如圖：

重啟：

三、vue工程目錄講解

1.項(xiàng)目目錄知識(shí)點(diǎn)講解

node_modules:不是我們的源碼文件，這個(gè)是依賴(lài)包下載之后的存放目錄
public:存放全局的靜態(tài)文件，比如說(shuō)網(wǎng)頁(yè)的icon
src:

1. assets:一般是存放代碼引用的靜態(tài)文件，比如:css、js、img
2. components:放一下vue的組件(可復(fù)用的代碼塊，就叫組件)
3. router:定義路由文件的目錄
4. views:存放 vue 網(wǎng)頁(yè)文件的目錄
5. App.vue:vue 頁(yè)面全局的入口，所有vue 文件的父級(jí)
6. main.js:代碼的配置文件，引入第三方的組件或者我們自己定義的一些組件、css、js 等

index.html:vue編譯成網(wǎng)頁(yè)才能在瀏覽器渲染
jsconfig.json:內(nèi)部配置文件
package.json:定義依賴(lài)庫(kù)的文件
package-lock.json:在你下載依賴(lài)的時(shí)候鎖定版本的一個(gè)文件
vite.config.js:全局的配置文件

2.設(shè)置網(wǎng)頁(yè)標(biāo)題

3.設(shè)置全局CSS global.css

在src---assets路徑下新建directory命名為:css,新建file命名為:global.css,如圖：

*{
    box-sizing: border-box;
}

body{
    margin: 0;
    padding: 0;
    color:#333;
    font-size: 14px;
}

a{
    text-decoration: none;
}

在main.js引入global.js 

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

在index中打開(kāi)頁(yè)面，查看效果

4.定義404頁(yè)面

先下載一張404圖片到本地再根據(jù)圖片步驟操作

先將404圖片復(fù)制到新建的directory，再新建404.vue，再寫(xiě)圖片路徑，再增添路由配置

<template>
  <div>
    <img src="~assets/img/404.png" alt="">
  </div>
</template>

寫(xiě)到這里發(fā)現(xiàn)自己的vue文件是灰色的，查找教程發(fā)現(xiàn)沒(méi)有下載插件：

File->Settings->Plugins，點(diǎn)擊下載即可

變成有顏色的了，如果你的不可以，回到上邊，檢查是否apply后才ok的，有的不是自動(dòng)的。

隨即再次嘗試

查看配置是否正確：

重試一下，得到結(jié)果：

大功告成?。?！

繼續(xù)配置顏色和樣式可以在view文件夾內(nèi)配置vue文件、修改路由器配置可得。

總結(jié)

到此這篇關(guān)于前端vue3框架搭建及創(chuàng)建項(xiàng)目工程完整步驟的文章就介紹到這了,更多相關(guān)vue3搭建創(chuàng)建項(xiàng)目工程內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論