【Vue3 + TS + Vite】从0到1搭建后台管理系统

前言

没搭建过Vue3的项目，从0开始搭建一下，记录一下自己的步骤。
技术栈： vue3 + ts + scss + pinia + vite
我尽量写的详细一些，后续也会记录我在项目过程中，遇到的一些问题。

环境搭建

在搭建之前请确认几点：
1.创建的项目将使用基于 Vite 的构建设置；
2.确保安装了最新版本的 Node.js，可以从官方网站下载并安装；
3.当前工作目录正是打算创建项目的目录。

一、创建项目

1. 使用 Vite 创建 Vue 3 + TypeScript 项目：

• npm:

   npm create vite@latest

• yarn:

yarn create vite

• Project name : 自己写一个就行，用英文（这个原因不用说吧）
• Select a framework：用键盘上下键选择就行，选到 Vue 回车
• Select a variant：我想尝试一下ts，所以这里选了 typescript，按照自己的需求选择
  这里我用 yarn ，命令创建项目，后面安装一些依赖，也是用 yarn

大家注意统一，要么一直用 npm ， 要么一直用 yarn

2. 进入项目目录：

cd my_demo_proj

3. 安装项目依赖：

yarn

二、项目结构规划

1.项目的初始结构

2. 通常可以创建以下目录结构：

• src/components ：存放可复用的组件。
• src/views ：存放页面组件，例如Dashboard.vue用于仪表盘页面等。
• src/api ：用于封装与后端 API 的交互。
• src/router ：路由配置。
• src/store ：状态管理。
• src/styles ：全局样式。
  按照自己的习惯来，且合理就行。还是把我创建的目录结构贴在这，方便我后期看。
  

三、配置 Pinia

1. 安装 Pinia：

• npm：

   npm install pinia

• yarn：

yarn add pinia

pinia 拥抱 ts 会比 vuex 好一些，pinia中文官网

2. 创建 Pinia 实例：

在项目的src目录下创建一个名为store的文件夹，然后在该文件夹中创建一个index.ts文件，添加以下内容：

import { createPinia } from 'pinia';

const pinia = createPinia();

export default pinia;

3. 在main.ts文件中引入 Pinia 实例：

import { createApp } from 'vue';
import App from './App.vue';
//pinia
import { createPinia } from 'pinia' 
const pinia = createPinia()

const app = createApp(App);
app.use(pinia);
app.mount('#app');

4. 在src/store文件夹下创建不同的 store 文件，例如userStore.ts用于管理用户状态：

 import { defineStore } from 'pinia';

 export const useUserStore = defineStore('user', {
   state: () => ({
     username: '',
     // 其他用户相关状态
   }),
   actions: {
     setUsername(username: string) {
       this.username = username;
     },
   },
 });

5. 在组件中使用 store：

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

 userStore.setUsername('admin');
 </script>

四、路由配置

1. 安装vue-router：

• npm:

  npm install vue-router@4

• yarn:

 yarn add vue-router@4 

2. 创建路由模块：

• 在src/views文件夹中创建 Dashboard.vue 文件；
• 在src/router文件夹中创建index.ts文件，配置路由：

  import { createRouter, createWebHistory } from 'vue-router';
  import Dashboard from '../views/Dashboard.vue';
  
  const routes = [
    {
      path: '/',
      name: 'Dashboard',
      component: Dashboard,
    },
    // 添加其他路由
  ];
  
  const router = createRouter({
    history: createWebHistory(),
    routes,
  });
  
  export default router;
  

五、安装 less/scss

这里我安装了 SCSS（因为没有用过这个，想试试），大家按需安装就行。

1. 安装 scss and sass 依赖

• npm：

npm add -D sass 

• yarn：

yarn add sass

2. 安装 less 依赖

• npm：

 npm add -D less 

• yarn：

 yarn add less 

六、安装 Element Plus

1. 安装 Element Plus（一个流行的 Vue UI 组件库）：

• npm :

npm install element-plus --save

• yarn：

yarn add element - plus

2. 引入 Element Plus：在 main.ts 文件中引入并配置。

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import App from './App.vue';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

七、请求数据（Axios 为例）

这里先简单的介绍一下，具体的我封装好的接口请求文件的代码，会单独出一篇分享出来。(这也是我第一次封装axios请求)

1. 安装 Axios：

• npm：

npm install axios

• yarn：

yarn add axios

2. 创建请求封装：

在src目录下创建api文件夹，在该文件夹中创建http.ts文件封装 Axios 请求：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'your-api-base-url',
});

export default instance;

3. 在 store 或组件中使用请求：

import http from '../api/http';

export const useDataStore = defineStore('data', {
  state: () => ({
    data: [],
  }),
  actions: {
    async fetchData() {
      const response = await http.get('/your-api-endpoint');
      this.data = response.data;
    },
  },
});

八、构建和部署

1. 开发完成后，可以使用以下命令进行构建：

• npm：

npm run build

• yarn：

yarn run build

2. 根据你的部署环境进行相应的部署操作，如将构建后的文件部署到服务器上。

以上是总结的大概步骤，更详细的步骤后面还会写，第一次自己搭建项目挑战真的大。办法总比困难多！！！