项目启动：搭建Vue 3工程化项目

前端付豪2025-10-27 10:52

init 项目

perl 复制代码

nvm install 20
nvm use 20
npm create vite

npm i vue-router@^4.3.0 vuex@^4.1.0

项目结构

arduino 复制代码

├── README.md

├── index.html 入口文件

├── package.json

├── public 资源文件

│ └── favicon.ico

├── src 源码

│ ├── App.vue 单文件组件

│ ├── assets

│ │ └── logo.png

│ ├── components

│ │ └── HelloWorld.vue

│ └── main.js 入口

└── vite.config.js vite工程化配置文件

src 结构规范化

css 复制代码

├── src

│ ├── api 数据请求

│ ├── assets 静态资源

│ ├── components 组件

│ ├── pages 页面

│ ├── router 路由配置

│ ├── store vuex数据

│ └── utils 工具函数

添加一些文件

vbnet 复制代码

router/index.js

import {
createRouter,
createWebHashHistory,
} from 'vue-router'
import Home from '../pages/home.vue'
import About from '../pages/about.vue'

const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router

xml 复制代码

pages/about.vue  

<template>
<h1>这是关于页面</h1>
</template>

xml 复制代码

pages/home.vue  

<template>
<h1>这是首页页面</h1>
</template>

xml 复制代码

App.vue

<script setup>
</script>

<template>
  <div class="container">
    <header>
      <h1>我的 Vue3 应用</h1>
      <nav>
        <router-link to="/">首页</router-link> |
        <router-link to="/about">关于</router-link>
      </nav>
    </header>

    <main>
      <router-view />
    </main>
  </div>
</template>

<style scoped>
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

header {
  text-align: center;
  margin-bottom: 20px;
}

nav {
  margin-top: 10px;
}

main {
  min-height: 300px;
}

footer {
  margin-top: 40px;
  text-align: center;
  color: #888;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

页面展示