01-搭建项目环境

创建环境

基于vite

使用yarn

yarn create vite

使用npm（接下来以此为例）

npm init vite

然后跟着提示一步一步走就行了。

基于vue-cli

vue ui # 接下来就是可视化的了

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {
      "vue/multi-word-component-names": "off"  //加上这一样，这样组件命名就可以任意了
    }
  },

规范（重要）

我们开发的项目是多页面的，所以 vue-router 和 pinia 也成为了必选项，就像一个团队需要人员配比，Vue 负责核心，pinia 负责管理数据，vue-router 负责管理路由。我们在 geek-admin 目录中使用下面这段代码安装pinia和vue-router。

npm install vue-router@next pinia@next

yarn add vue-router@next pinia@next

无规矩不成方圆，团队项目中的规范尤其重要。我们先对几个文件夹的分层进行规定，便于管理，下面是 src 目录的组织结构（重要！！！！！）。

├── src
│   ├── api            数据请求
│   ├── assets         静态资源
│   ├── components     组件
│   ├── pages          页面
│   ├── router         路由配置
│   ├── store          vuex数据
│   └── utils          工具函数

我们的页面需要引入路由系统，我们进入到 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

再来到main.js中使用我们刚刚定义的路由：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
createApp(App)
  .use(router)
  .mount('#app')

此时会发现报错，因为在src/router/index.js中引入的两个组件我们并没有定义。现在我们到pages文件夹下定义两个.vue文件：

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

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

此时报错解决。但是页面并没有发生什么变化，因为我们只是定义了它们，还没有用，去src/App.vue改写代码：

<template>
  <div>
    <router-link to="/">首页</router-link> |
    <router-link to="/about">关于</router-link>
  </div>
  <router-view></router-view>
</template>

回到浏览器：

至此，我们的自定义页面完成。
最后这个项目的架构大概是下面这样（虽然有些工具目前还没有安装），这就是一个足以应对复杂项目开发的架构了：

一些插件

VueUse

简介：use是封装函数时的命名惯例，所以该库封装了许多功能，开箱即用
安装：

npm i @vueuse/core
yarn add @vueuse/core

GitHub：https://github.com/vueuse/vueuse
官网：https://vueuse.org/

<template>
  <button @click="toggle">全屏模式</button> <!--点击即可进入全屏-->
</template>
<script setup>
import { useFullscreen } from '@vueuse/core'
const { isFullscreen, enter, exit, toggle } = useFullscreen()
</script>

VueUse 是 Vue 官方团队成员的作品，它提供了一大批工具函数，包含了很多我们常用的工具函数，我们可以把网络状态、异步请求的数据、动画和事件等功能，都看成是响应式的数据去管理。