最近接到一个新的需求，需要使用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项目一样配置@别名：
// 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中也配置@别名：
// 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
// 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中引入：
...
import store from "@/store/index";
const app = createApp(App);
app.use(store);在组件中使用：
<script setup lang="ts">
import {GlobalStore} from '@/store'
const global = GlobalStore();
</script>
<template>
<div>{{global.token}}</div>
</template>使用less，并定义全局less变量
首先我们先安装less和less-loader：
npm i less less-loader然后我们需要在vite.config.ts中配置css预处理器
export default defineConfig({
...
css: {
// css预处理器
preprocessorOptions: {
less: {
additionalData: `@import "${resolve(__dirname, 'src/assets/style/global.less')}";`,
javascriptEnabled: true,
}
}
}
})我们这里默认加载global.less中的样式，那么我们就需要创建一个这样的文件：
// src/assets/style/global.less
@primary-color: #5878e2; // 主题色最后在main.ts中引入即可：
import "./assets/style/global.less";然后在组件中使用时，就可以直接使用：
<script setup lang="ts">
import {GlobalStore} from '@/store'
const global = GlobalStore();
</script>
<template>
<div>{{global.token}}</div>
</template>
<style scoped>
div {
color: @primary-color; // 主题色
}
</style>配置路由
配置路由一般采用vue-router
yarn add vue-router新建src/router/index.ts
// src/router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const HelloWorld = () => import("@/components/HelloWorld.vue");
const routes: Array<RouteRecordRaw> = [
{
path: "/",
name: "index",
meta: {
title: "首页",
},
component: HelloWorld,
},
{
path: "/helloworld",
name: "helloworld",
meta: {
title: "helloworld",
},
component: HelloWorld,
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;然后在main.ts中引入router
import router from './router'
app.use(router)总结
本文介绍了快速创建vite+vue3+ts+pinia项目，学会了就来试试手吧。
