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

一、vue项目创建

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

E:\CODE\vueDemo>npm create vue@latest// 执行的指令Need to install the following packages:create-vue@3.22.4Ok to proceed?(y)y>npx>create-vueTVue.js-The Progressive JavaScript Framework|o 请输入项目名称：|VueDemo|o 请输入包名称：|vuedemo|o 是否使用 TypeScript 语法？|No|o请选择要包含的功能：(↑/↓ 切换，空格选择，a 全选，回车确认)|Router（单页面应用开发）|o选择要包含的试验特性：(↑/↓ 切换，空格选择，a 全选，回车确认)|Vue3.6（测试版）|o 项目将使用哪个包管理器？ （需要根据包管理器生成对应的 Vue3.6测试版配置）|npm|o 跳过所有示例代码，创建一个空白的 Vue 项目？|No 正在初始化项目E:\CODE\vueDemo\VueDemo...|— 项目初始化完成，可执行以下命令： cd VueDemo npm install npm run dev|可选：使用以下命令在项目目录中初始化 Git： git init&&git add-A&&git commit-m"initial commit"

执行指令：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 代码如下：

<template><header><imgalt="Vue logo"class="logo"src="@/assets/logo.svg"width="125"height="125"/><divclass="wrapper"><HelloWorldmsg="You did it!"/><nav><RouterLinkto="/">Home</RouterLink><RouterLinkto="/about">About</RouterLink></nav></div></header><RouterView/></template><scriptsetup>import{RouterLink,RouterView}from'vue-router'importHelloWorldfrom'./components/HelloWorld.vue'</script>

router/index.js内容如下：

import{createRouter,createWebHistory}from'vue-router'importHomeViewfrom'../views/HomeView.vue'constrouter=createRouter({history:createWebHistory(import.meta.env.BASE_URL),routes:[{path:'/',name:'home',component:HomeView,},{path:'/about',name:'about',component:()=>import('../views/AboutView.vue'),},],})exportdefaultrouter

代码解说：这里有俩个路由跳转，分别为/和/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内容如下：

<scriptsetup>import{RouterView}from'vue-router'</script><template><RouterView/></template>

router/router.js内容如下：

import{createRouter,createWebHistory}from'vue-router'constrouter=createRouter({history:createWebHistory(import.meta.env.BASE_URL),routes:[{path:'/',name:'index',component:()=>import('../pages/mainPage/index.vue'),},{path:'/about',name:'about',component:()=>import('../pages/aboutPage/index.vue'),},],})exportdefaultrouter