vite + vue3全家桶搭建项目

该文章主要用来记录自己的学习过程，便于以后翻查。

1 仓库基础配置

1.1 GitHub创建新仓库

1.2 创建并使用SSH密钥对

1.3 使用Vite初始化本地仓库

1.4 初始化本地Git仓库

1.5 将本地Git仓库关联到远程仓库

1.6 将本地代码添加到暂存区

1.7 提交更改

1.8 推送到远程仓库

1.9 创建开发分支

创建develop分支 master分支用户代码合并，develop分支用于开发。

1.10 将创建远程仓库的开发分支

1.11 将开发分支关联到远程仓库

2 路由配置

2.1 安装vue-router

pnpm install vue-router@4

2.2 注册路由插件

初始化路由插件，添加页面路由 将路由插件注册到app对象上 接下来就可以编写页面了

3 状态管理

3.1 安装pinia

pnpm install pinia

3.2 初始化pinia对象

3.3 注册pinia对象

3.4 创建单个pinia状态

3.5 在页面组件使用pinia状态

4 使用Element Plus

4.1 安装

pnpm install element-plus

4.2 按需引入

需要额外安装插件：unplugin-vue-components、unplugin-auto-import

pnpm install -D unplugin-vue-components unplugin-auto-import

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

接下来就可以直接在单文件组件中使用element-plus组件了

5 使用css预处理器

推荐安装sass

5.1 安装sass

pnpm install sass --save-dev

5.2 使用sass

5.2.1 使用vite搭建的项目，安装sass后可以直接在单文件组件中使用sass语法

// App.vue
<script setup>

</script>

<template>
  <header class="app-header">公共头部</header>
  <router-view></router-view>
  <footer class="app-footer">
    <p class="footer-title-1">底部标题1</p>
    <p class="footer-title-2">底部标题1</p>
  </footer>
</template>

<style lang="scss" scoped>
.app-header {
  color: rgb(49, 151, 93);
}
.app-footer {
  color: rgb(208, 125, 36);
  .footer-title {
    &-1 {
      font-size: 20px;
    }
    &-2 {
      font-size: 40px;
    }
  }
}
</style>

5.2.2 vite.config.js文件中进行更详细的配置

创建全局样式文件，路径如下

// src/assets/styles/variables.scss
$primary-color: #42b983;
$secondary-color: #35495e;

在 vue.config.js 中配置 additionalData，将这个文件全局引入。
注意：新版本sass不再支持@import，需要改为@use

// vite.config.js
// 其他配置...
import path from 'path'

// https://vite.dev/config/
export default defineConfig({
  // 其他配置...
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @use "@/assets/styles/variables.scss" as *;
        `, // 全局引入多个文件
      },
    },
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'), // 配置 @ 别名
    },
  },
})

在页面使用全局变量

<script setup>
import { useUserStore } from '../store/user'
const userStore = useUserStore();
</script>

<template>
  <div>
    首页
    <p class="name">name: {{ userStore.name }}</p>
    <button @click="userStore.setUserName">修改名称</button>
    <el-button>我是 ElButton</el-button>
  </div>
</template>

<style lang="scss" scoped>
.name {
  color: $primary-color;
}
</style>

6 设置环境变量与模式

6.1 设置环境变量

在根目录下分别创建不同的环境变量文件，并在文件中定义变量

// 开发模式
// .env.development
VITE_IMAGE_BASE_URL = /dev/assets/images

// 生产模式
// .env.production
VITE_IMAGE_BASE_URL = /assets/images

// 自定义模式
// .env.developmentn.other
VITE_IMAGE_BASE_URL = /other/iamges

6.2 使用环境变量

// 模式(string)
console.log('process.env.NODE_ENV', process.env.NODE_ENV);
// 模式(string)，和 process.env.NODE_ENV 的值相同
console.log('import.meta.env.MODE', import.meta.env.MODE);
// 项目基准路径(string)
console.log('import.meta.env.BASE_URL', import.meta.env.BASE_URL);
// 是否开发模式(boolean)
console.log('import.meta.env.DEV', import.meta.env.DEV);
// 是否生产模式(boolean)
console.log('import.meta.env.PROD', import.meta.env.PROD);
// 是否SSR模式(boolean)
console.log('import.meta.env.SSR', import.meta.env.SSR);
// 自定义环境变量
console.log('import.meta.env.VITE_IMAGE_BASE_URL', import.meta.env.VITE_IMAGE_BASE_URL);