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

文章目录一、vue项目创建二、入口界面配置一、vue项目创建创建项目npm create vuelatest执行后输入项目名VueDemo)包名称VueDemo是否使用typeScript语法E:\CODE\vueDemonpm create vuelatest// 执行的指令Need to install the following packages:create-vue3.22.4Ok to proceed?(y)ynpxcreate-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 initgit add-Agit commit-minitial 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 代码如下templateheaderimgaltVue logoclasslogosrc/assets/logo.svgwidth125height125/divclasswrapperHelloWorldmsgYou did it!/navRouterLinkto/Home/RouterLinkRouterLinkto/aboutAbout/RouterLink/nav/div/headerRouterView//templatescriptsetupimport{RouterLink,RouterView}fromvue-routerimportHelloWorldfrom./components/HelloWorld.vue/scriptrouter/index.js内容如下import{createRouter,createWebHistory}fromvue-routerimportHomeViewfrom../views/HomeView.vueconstroutercreateRouter({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.vuerouter.js内容做修改app.vue内容如下scriptsetupimport{RouterView}fromvue-router/scripttemplateRouterView//templaterouter/router.js内容如下import{createRouter,createWebHistory}fromvue-routerconstroutercreateRouter({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