5分钟快速搭建vue3+ts+vite+pinia项目
最近接到一个新的需求,需要使用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)复制代码
总结
到此这篇关于5分钟快速搭建vue3+ts+vite+pinia项目的文章就介绍到这了,更多相关搭建vue3+ts+vite+pinia项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
JavaScript中正则表达式使数字、中文或指定字符高亮显示
这篇文章主要介绍了JavaScript中正则表达式使数字、中文或指定字符高亮显示,需要的朋友可以参考下2017-10-10JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
多网站的需要填写的文本框在默认状态下都会给出一个默认的提示语言,当鼠标点击此文本框的时候能够将里面的默认文本清除,当删除输入的文本且焦点离开文本框的时候再将默认的文本写入文本框2016-01-01vue element loading遮罩层添加按钮功能实现
这篇文章主要介绍了vue element loading遮罩层添加按钮功能实现,通过实例代码补充介绍了vue+elementui的this.$loading遮罩使用方法,需要的朋友可以参考下2024-03-03
最新评论