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

文章目录

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

一、vue项目创建

创建项目：npm create vue@latest

执行后输入项目名（VueDemo)，包名称（VueDemo），是否使用typeScript语法

javascript 复制代码

E:\CODE\vueDemo>npm create vue@latest          // 执行的指令
Need to install the following packages:
create-vue@3.22.4
Ok to proceed? (y) y

> npx
> create-vue

T  Vue.js - The Progressive JavaScript Framework
|
o  请输入项目名称：
|  VueDemo
|
o  请输入包名称：
|  vuedemo
|
o  是否使用 TypeScript 语法？
|  No
|
o  请选择要包含的功能： (↑/↓ 切换，空格选择，a 全选，回车确认)
|  Router（单页面应用开发）
|
o  选择要包含的试验特性： (↑/↓ 切换，空格选择，a 全选，回车确认)
|  Vue 3.6（测试版）
|
o  项目将使用哪个包管理器？ （需要根据包管理器生成对应的 Vue 3.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 代码如下：

html 复制代码

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

router/index.js内容如下：

javascript 复制代码

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

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

export default router

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

html 复制代码

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

<template>
  <RouterView />
</template>

router/router.js内容如下：

javascript 复制代码

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

const router = 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'),
    },
  ],
})

export default router