【Vue3 + TS + Vite】从0到1搭建项目框架

菜鸟una

已于 2025-05-10 17:19:21 修改

阅读量3.3k

点赞数 40

CC 4.0 BY-SA版权

分类专栏： Vue3 后台管理系统--学习笔记文章标签： vue.js 前端 typescript vite yarn npm element-plus

于 2024-10-09 00:14:52 首次发布

本文链接：https://blog.csdn.net/qq_45954390/article/details/142101954

前言

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

文章目录

前言
环境搭建
- 一、创建项目
- - - 1. 使用 Vite 创建 Vue 3 + TypeScript 项目：
    - 2. 进入项目目录：
    - 3. 安装项目依赖：
- 二、项目结构规划
- - - 1.项目的初始结构
    - 2. 通常可以创建以下目录结构：
- 三、配置 Pinia
- - - 1. 安装 Pinia：
    - 2. 创建 Pinia 实例：
    - 3. 在`main.ts`文件中引入 Pinia 实例：
    - 4. 在`src/store`文件夹下创建不同的 store 文件，例如`userStore.ts`用于管理用户状态：
    - 5. 在组件中使用 store：
- 四、路由配置
- - - 1. 安装`vue-router`：
    - 2. 创建路由模块：
- 五、安装 less/scss
- - - 1. 安装 scss and sass 依赖
    - 2. 安装 less 依赖
- 六、安装 Element Plus
- - - 1. 安装 Element Plus（一个流行的 Vue UI 组件库）：
    - 2. 引入 Element Plus：在 main.ts 文件中引入并配置。
- 七、请求数据（Axios 为例）
- - - 1. 安装 Axios：
    - 2. 创建请求封装：
    - 3. 在 store 或组件中使用请求：
- 八、构建和部署
- - - 1. 开发完成后，可以使用以下命令进行构建：
    - 2. 根据你的部署环境进行相应的部署操作，如将构建后的文件部署到服务器上。

环境搭建

在搭建之前请确认几点：
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
这里给大家推荐一个博主原创的博客 —— 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

最低0.47元/天解锁文章

200万优质内容无限畅学

【Vue3 + TS + Vite】从0到1搭建项目框架

前言

文章目录

环境搭建

一、创建项目

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

2. 进入项目目录：

3. 安装项目依赖：

二、项目结构规划

1.项目的初始结构

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

三、配置 Pinia

1. 安装 Pinia：

2. 创建 Pinia 实例：

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

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