Vue项目创建与入口配置全攻略

文章目录

一、vue项目创建
二、入口界面配置

一、vue项目创建

创建项目：npm create vue@latest
执行后输入项目名（VueDemo)，包名称（VueDemo），是否使用typeScript语法

1E:\CODE\vueDemo>npm create vue@latest          // 执行的指令
2Need to install the following packages:
3create-vue@3.22.4
4Ok to proceed? (y) y
5
6> npx
7> create-vue
8
9T  Vue.js - The Progressive JavaScript Framework
10|
11o  请输入项目名称：
12|  VueDemo
13|
14o  请输入包名称：
15|  vuedemo
16|
17o  是否使用 TypeScript 语法？
18|  No
19|
20o  请选择要包含的功能： (↑/↓ 切换，空格选择，a 全选，回车确认)
21|  Router（单页面应用开发）
22|
23o  选择要包含的试验特性： (↑/↓ 切换，空格选择，a 全选，回车确认)
24|  Vue 3.6（测试版）
25|
26o  项目将使用哪个包管理器？ （需要根据包管理器生成对应的 Vue 3.6 测试版配置）
27|  npm
28|
29o  跳过所有示例代码，创建一个空白的 Vue 项目？
30|  No
31
32正在初始化项目 E:\CODE\vueDemo\VueDemo...
33|
34—  项目初始化完成，可执行以下命令：
35
36   cd VueDemo
37   npm install
38   npm run dev
39
40| 可选：使用以下命令在项目目录中初始化 Git：
41
42   git init && git add -A && git commit -m "initial commit"
43

执行指令：npm install
启动服务：npm run dev（具体是 dev 还是 server 可在 package.json 中修改配置）
浏览器访问：localhost:5173 (默认自带的 vue 相关页面出来了说明项目创建成功）

项目目录介绍

/src/App.vue：应用根组件
/src/main.js：应用入口文件
/src/pages：存放页面级组件，与路由直接关联。在基于路由的项目中，每个路由对应一个独立的页面组件
/src/router/index.js：路由配置文件，定义应用的路由规则和导航逻辑
/src/assets：静态资源文件，如图片、字体、样式表（CSS/SCSS）等。这些资源会被构建工具（如Vite或Webpack）处理并打包
/src/compontents：存放可复用的Vue组件。通常按功能或模块进一步组织子目录，例如components/Button、components/Modal等，便于维护和查找
/src/store：状态管理目录，适用于Pinia或Vuex。存储全局状态和业务逻辑
/src/utils/helpers：存放工具函数或辅助类，如日期格式化、请求封装等（通用功能）
/src/api：封装网络请求相关代码（各个page相关的API也可以放到各自的page中/src/pages/xxx/api/index.js）
/src/styles：全局样式文件

二、入口界面配置

项目创建后，src目录下有个 app.vue 和 main.js，该文件默认为页面的入口文件，router/index.js为路由对于文件，app.vue 代码如下：

1<template>
2  <header>
3    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
4
5    <div class="wrapper">
6      <HelloWorld msg="You did it!" />
7
8      <nav>
9        <RouterLink to="/">Home</RouterLink>
10        <RouterLink to="/about">About</RouterLink>
11      </nav>
12    </div>
13  </header>
14
15  <RouterView />
16</template>
17
18<script setup>
19import { RouterLink, RouterView } from 'vue-router'
20import HelloWorld from './components/HelloWorld.vue'
21</script>
22

router/index.js内容如下：

1import { createRouter, createWebHistory } from 'vue-router'
2import HomeView from '../views/HomeView.vue'
3
4const router = createRouter({
5  history: createWebHistory(import.meta.env.BASE_URL),
6  routes: [
7    {
8      path: '/',
9      name: 'home',
10      component: HomeView,
11    },
12    {
13      path: '/about',
14      name: 'about',
15      component: () => import('../views/AboutView.vue'),
16    },
17  ],
18})
19
20export default router
21
22

代码解说：这里有俩个路由跳转，分别为/和/about，路由跳转所改变的是RouterView区域，不管哪个路由header标签中的内容都会展示

独立Pages页面

对于较大应用，可能会存在多个应用，各个应用相互独立，一般会建立/src/pages目录，这个目录中存放各个应用的 page，一般每个page中的index.vue和index.js为入口文件，如果要迁移至其他代码，只需要将单个page模块复制过去，稍作改动即可

对于整个界面展示某个page中的页面（即整个页面展示某个page中的vue，如某个目录src/pages/mainPage模块），不需要header部分，可以对app.vue，router.js内容做修改
app.vue内容如下：

1<script setup>
2import { RouterView } from 'vue-router'
3</script>
4
5<template>
6  <RouterView />
7</template>
8

router/router.js内容如下：

1import { createRouter, createWebHistory } from 'vue-router'
2
3const router = createRouter({
4  history: createWebHistory(import.meta.env.BASE_URL),
5  routes: [
6    {
7      path: '/',
8      name: 'index',
9      component: () => import('../pages/mainPage/index.vue'),
10    },
11    {
12      path: '/about',
13      name: 'about',
14      component: () => import('../pages/aboutPage/index.vue'),
15    },
16  ],
17})
18
19export default router
20

《Vue项目创建与入口配置全攻略》是转载文章，点击查看原文。