前言

在开始之前，我们应该有一个共识，任何新技术，官方文档都优于任何博客，所以在学习之前，强烈建议你好好地阅读官方文档，在本篇文章的实践中，应该看的是 vite 官网。

下面记录一下怎么使用Vue3 + ts + vite 搭建一个项目

一、基础环境和工具

使用 pnpm 代替 npm 建议使用 pnpm 代替 npm，pnpm 速度更快。

pnpm 的用法和 npm 一致，唯一的区别是 npm 是 node 自带的包管理工具，所以在安装好 node 之后就可以使用 npm。但是 pnpm 在首次使用之前需要用 npm 全局安装

npm i pnpm -g pnpm -v 查看版本
使用 pinia 代替 vuex

Pinia 是Vue 的专属状态管理库，用法简单，可以尝试使用 pinia 代替 vuex

二、vite环境搭建，构建vite-vue-ts项目

2.1 使用命令初始化项目

打开 vite 的官网，依照指示使用命令行，初始化一个 vite 作为打包工具的项目

打开命令行，运行如下命令，使用 vue + ts 的模板，创建一个名称为 vite-vue-ts 的项目 pnpm create vite@latest vite-vue-ts --template vue

初始化项目： pnpm install

启动项目： pnpm run dev

2.2增加 .nvmrc

在项目的根目录，新建 .nvmrc 文件，输入初始化时 node 的版本号，用来避免每次切换项目都手动切换 node 版本，新增后重启VSCode

2.3## 增加工程化插件

项目已经初步成型，下面我们需要增加一些提高我们工作效率的插件

2.3.1 使用 scss

其实现在我们的项目已经完全可以运行起来了，但是项目中有一个 style.css 显然不是我们想要的，vite可以原生的支持 scss 文件，我们一般都是使用 scss 写样式。

pnpm add -D sass

增加 -D 参数，在开发环境中才使用 sass，因为生产环境，scss 文件会被编译成 css 文件，这个插件是用不到的

增加 common.scss 文件，并在 main.ts 中引入

2.3.2 安装 router

pnpm install vue-router@4

main.ts:

import router from "./router/index";

const app= createApp(App)

app.use(router)

创建router目录及index.ts文件

2.3.3 安装pinia

pnpm install pinia

main.ts:

import { createPinia } from 'pinia'

const pinia = createPinia()

const app= createApp(App)

app.use(pinia)

src目录下创建index.ts文件：

组件中调用：

引入 import { useMain } from '../store/home'

import { storeToRefs } from 'pinia';

结构 const main = useUser()

响应式结构，可直接修改数据 const { counter,name ,doubleCount } = storeToRefs(main)

调用方法 main.increment()

使用$patch，批量修改

2.3.4 引入 Element Plus

pnpm install element-plus --save

pnpm install @element-plus/icons-vue

安装unplugin-vue-components 和 unplugin-auto-import插件

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

vite.config.ts:

如有出现错误，希望大家多多指正，谢谢大家！

Vue3+vite+ts构建前端工程化项目

前言