5分钟快速搭建一个vue3+ts+vite+pinia项目
theme: fancy
持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情
最近接到一个新的需求，需要使用Vue3来开发，本着学习的目的，就先来创建一个Vue3项目。既然是学习，那就怎么新怎么来。
本次创建项目需要接触到4个东西：Vue3、TypeScript、vite、pinia，咱们来逐一解释。
- 作为前端常用三大框架（Vue、React、Angular）之一，Vue在2020年9月18日正式发布了Vue3.0，简称Vue3
- JavaScript我们都知道，而Typescript则是JavaScript的超集，即可编译成JavaScript，相当于是在JavaScript上面加了类型约束
- vite是一种新型前端构建工具，同样出自尤大之手。使用webpack的可以看看vite，突出一个字：快
- pinia可作为vue3项目的数据存储共享，不仅API更加简洁，而且可配合ts使用，更好的实现类型推导
介绍完毕，我们就来开始新建项目。
创建项目
这一次我们使用vite来新建项目，值得注意的是vite需要node版本大于等于12.0.0，如果node版本太低， 将会影响vite的使用。
npm install -g yarn // vite项目创建方式有很多，我们采用yarn，如果没有则需要全局安装
yarn create vite my-vue-app --template vue-ts // 创建vite项目，并指定采用vue3+ts的项目模板
cd my-vue-app
yarn // 安装依赖
yarn dev // 运行
运行结果：
这样我们一个vite项目就创建好了，但是还没有结束。
配置
配置@别名
一般来说我们在项目中访问静态资源时，都是采用项目路径的方式，一是看起来更简洁易懂，另外在修改时不容易出现路径问题。vite项目也需要像普通vue项目一样配置@别名：
js
// vite.config.ts
...
import * as path from 'path'
import { resolve } from 'path'
export default defineConfig({
plugins: [vue()],
resolve: {
//设置别名
alias: {
'@': path.resolve(__dirname, 'src')
}
},
})
由于我们将采用typescript来开发项目，因此需要在tsconfig.json中也配置@别名：
json
// tsconfig.json
{
"compilerOptions": {
...
"skipLibCheck": true,
// 解析非相对模块名的基准目录
"baseUrl": "./",
// 模块名到基于 baseUrl的路径映射的列表。ts文件中使用@
"paths": {
"@": ["src"],
"@/*": ["src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}
配置pinia
在vue3项目中，我们采用pinia来代替vuex，首先是安装：
yarn add pinia
yarn add pinia-plugin-persist // pinia数据持久化
然后在src文件夹下创建store/index.ts
```ts // src/store/index.ts import {defineStore} from 'pinia'; import {createPinia} from 'pinia'; import piniaPersist from 'pinia-plugin-persist';
interface GlobalState { token: string, userInfo: any } // defineStore 调用后返回一个函数，调用该函数获得 Store 实体 export const GlobalStore = defineStore({ id: 'GlobalState', // id: 必须的，在所有 Store 中唯一 // state: 返回对象的函数 state: (): GlobalState => ({ token: '', userInfo: {} }), getters: {}, actions: { // 不使用箭头函数 setToken(token: string) { this.token = token; }, setUserIngo(userInfo: any) { this.userInfo = userInfo; } }, // 持久化 persist: { enabled: true, strategies: [ { key: 'GlobalState', storage: localStorage, // storage: sessionStorage, } ] } }); const pinia = createPinia(); pinia.use(piniaPersist);
export default pinia;
```
然后在main.ts中引入：
ts
...
import store from "@/store/index";
const app = createApp(App);
app.use(store);
在组件中使用：
```ts
```
使用less，并定义全局less变量
首先我们先安装less和less-loader：
npm i less less-loader
然后我们需要在vite.config.ts中配置css预处理器
ts
export default defineConfig({
...
css: {
// css预处理器
preprocessorOptions: {
less: {
additionalData: `@import "${resolve(__dirname, 'src/assets/style/global.less')}";`,
javascriptEnabled: true,
}
}
}
})
我们这里默认加载global.less中的样式，那么我们就需要创建一个这样的文件：
less
// src/assets/style/global.less
@primary-color: #5878e2; // 主题色
最后在main.ts中引入即可：
import "./assets/style/global.less";
然后在组件中使用时，就可以直接使用：
```ts
```
配置路由
配置路由一般采用vue-router
yarn add vue-router
新建src/router/index.ts
```ts // src/router/index.ts import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const HelloWorld = () => import("@/components/HelloWorld.vue");
const routes: Array
const router = createRouter({ history: createWebHistory(), routes, }); export default router; ```
然后在main.ts中引入router
import router from './router'
app.use(router)
总结
本文介绍了快速创建vite+vue3+ts+pinia项目，学会了就来试试手吧。
原创不易，转载请注明出处。