上面两篇做了简单的介绍，水了两篇终于进入了正轨。本篇使用 yarn + vite 的方式建立一个工程化的项目，正式开始用 Vue3 做项目。

使用 yarn + vite 建立一个 vue3 的项目

官网（cn.vuejs.org/guide/quick… ）上面用的是 npm + vite 建立项目，我个人比较喜欢使用 yarn，所以采用 vite官网（cn.vitejs.dev/guide/ ）介绍的方法来建立项目。

建立项目文件

如果是 Windows 系统，可以打开命令窗口，进入一个你喜欢的文件夹，然后使用下面的命令建立项目：

yarn create vite

然后需要你回答三个问题：项目名称、选择类型、选择配置方案。

√ Project name: ... vite43.01
√ Select a framework: » Vue
√ Select a variant: » Customize with create-vue ↗

如果选择第三个（自定义），那么会调用 create-vue 继续后续步骤，问你一系列问题，我们根据需要选择即可：

√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes

都选择之后经过等待后会出现提示：（我的电脑比较老）

Done. Now run:

  cd vite43.01
  yarn
  yarn dev

Done in 69.65s.
Done in 150.82s.

现在我们根据提示进入文件夹，使用 yarn 初始化项目，即根据选项安装各种第三方插件需要的代码。

最后执行 yarn dev，就可以打开浏览器看效果了。

  VITE v4.3.3  ready in 946 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

以前端口号是固定的，现在似乎比较灵活了。

一些设置

vite 的各种设置可以到官网（cn.vitejs.dev/guide/ ）查看。

安装其他第三方库

刚才我们安装了 Typescript、Pinia、Vue Router、ESLint，但是还没有UI库，所以需要我们手动安装一个，还是选择 elementPlus。element-plus.gitee.io/zh-CN/guide…

yarn add element-plus

编辑器和插件

官网推荐 Visual Studio Code + Volar 扩展，我个人也比较喜欢，当然你也可以选择你喜欢的编辑器。另外还可以安装其他插件，比如 Typescript、ESLint 的。

文件结构和代码介绍

建立项目会自带文件夹结构，大家都按照这个来，看别人代码的时候就不会懵了。那么创建的项目的结构是什么样子呢？

vue的项目结构.jpg

node_modules：各种第三方插件的代码
public：不参与打包的静态资源
src：我们写的代码
- components：共用组件
- router：路由相关的设置
- stores：状态相关的设置
- views：页面视图
  - xxx：可以按照功能模块设置文件夹
- App.vue：根组件
- main.ts：挂载插件、路由、状态等，以及各种设置
index.html：起始页面

建立项目时，自带的代码有点多，我们可以删掉不需要的，保留需要的文件，然后稍加改造。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/nfwt.ico" />
    <link href="https://unpkg.com/element-plus@2.3.4/dist/index.css" rel="stylesheet"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue3的一些使用方式</title>
  </head>
  <body>
    <div id="app">加载中...</div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

稍微改了一下代码。

使用CDN的方式引入 UI库需要的css，这样css不用参与编译，当然这只是个人喜好。
加载提示，<div id="app"></div> 里面的内容可以改为你喜欢的等待加载的提示。
script 表示采用 ES 的方式加载指定的js文件。

main.ts

vue 的代码都存放在 src 文件夹里面，main.ts(js)作为入口文件，负责加载插件、环境配置、挂载等功能。

import { createApp } from 'vue'
import { createPinia } from 'pinia'
const pinia = createPinia()

// 根组件，一般用于整体布局
import App from './App.vue'

// 设置路由
import router from './router'

// 加载其他插件

// UI库
import ElementPlus from 'element-plus'
// import 'element-plus/lib/theme-chalk/index.css'
// import 'dayjs/locale/zh-cn'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

createApp(App)
  .use(router)
  .use(ElementPlus, { locale: zhCn, size: 'small' }) // UI库
  .use(pinia)
  .mount('#app')

app.vue

根组件，一般用于做布局，设置路由导航等，可以根据需求详细设计，下面仅举例：

<template>
  <div class="common-layout">
      <el-container>
        <el-header> 演示 一些Vue3的使用方法</el-header>
        <el-container>
          <el-aside width="200px">
            <el-menu
              :default-active="1"
              class="el-menu-vertical-demo"
              active-text-color="#ffd04b"
              background-color="#545c64"
              text-color="#fff"
              router
            >
              <el-menu-item index="/">
                <template #title>目录</template>
              </el-menu-item>
              <el-menu-item index="/about">
                <template #title>关于我们</template>
              </el-menu-item>
            </el-menu>
          </el-aside>
          <el-main>
            <hr>
            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>

路由

根据需求设置路由，首页可以直接 import 进来，其他组件建议使用懒加载的方式，需要的时候才加载，节省首次加载时间。

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

// 首页，目录
import Index from '../views/indexView.vue'

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

export default router // 导出路由配置

大家有没有发现一个问题，在路由里面设置了一次，然后又要在导航菜单里面再设置一次类似的内容，是不是有点繁琐？我们加一个新的模块，除了写代码外，还需要设置路由，设置导航，然后才能把模块弄进去。能不能一步到位？

我们可以把路由和导航需要的属性合在一起做成一个大对象，然后根据这个对象生成路由和导航，这样就可以一步到位了。

篇幅有限这里就不细说了。

状态

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})

这是一个默认的状态，先不改了。

调试

最简单的调试方法就是使用F12

vue的调试.jpg

找到我们写的代码，然后设置断点，就可以进行调试了。

小结

舞台已经搭建好了，现在我们对 Vue3 已经有了一个整体的感觉，知道了大体的运行加载方式，这时再去看官网给的各种实例，就不会有茫茫然的感觉了吧。

说了多，又似乎啥也没说。这个系列大概会继续下去。总结、整理，不乱。

源码

gitee.com/naturefw-pr…

在线看

<naturefw-project.gitee.io/introductio…

新手学Vue3（三）用 yarn + vite 搭建一个Vue3的舞台