位置: IT常识 - 正文
手把手，完整的从0搭建vite-vue3-ts项目框架：配置less+svg+pinia+vant+axios(手把手的教)
编辑：rootadmin推荐整理分享手把手，完整的从0搭建vite-vue3-ts项目框架：配置less+svg+pinia+vant+axios(手把手的教)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:什么叫手把手,手把手后面一句,手把手是词语,手把手后面一句,手把手什么,手把手示范,手把手示范,手把手 意思,内容如对您有帮助，希望把文章链接给更多的朋友！
项目同步git：https://gitee.com/lixin_ajax/vue3-vite-ts-pinia-vant-less.git
觉得有帮助的小伙伴请点下小心心哦
为避免赘述，过于基础的点会直接省略或贴图，比如创建文件夹/文件的路径/路由一类
配置相应功能，也尽量只贴相关代码，并不代表整个文件内容
我会尽量把每一步都记录下来，让跟随文档操作的朋友也能还原项目
项目不尽完美，但是主体功能应该都可以有所参考
一.本地初始环境
二.使用vite脚手架，创建vue3+ts
yarn create vite输入项目名，回车确认
选择Vue和TypeScript
文件目录如下，项目创建成功！
三.启动项目：根据提示进入项目运行项目，或自行使用编码器输入指令进行启动
yarn // 安装依赖yarn dev // 运行项目浏览器打开地址，运行成功！
四.必备依赖
ThispackagecontainstypedefinitionsforNode.js(http://nodejs.org/)
yarn add @types/node -S -D
五.配置路径别名@
1.位置：直接改写vite.config.ts--顺便就添加alias
// vite.config.tsimport vue from "@vitejs/plugin-vue";import { resolve } from "path";function pathResolve(dir: string) { return resolve(process.cwd(), ".", dir);}// https://vitejs.dev/config/export default () => { return { resolve: { alias: [ { find: "@", replacement: pathResolve("src"), }, { find: "views", replacement: pathResolve("src/views"), }, ], }, plugins: [vue()], };};2.位置：tsconfig.json--修改baseUrl及paths
// tsconfig.json{ "compilerOptions": { ...... "baseUrl": "./", "paths": { "@/*": ["src/*"], "views/*": ["src/views/*"], "components/*": ["src/components/*"], "assets/*": ["src/assets/*"] } }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], "references": [{ "path": "./tsconfig.node.json" }]}六.配置vue-router
yarn add vue-router -S推荐一个很好的插件nprogress【进度条】
yarn add @types/nprogress nprogress -Dmain.ts引入router
// main.tsimport { createApp } from 'vue'import './style.css'import App from './App.vue'import router from "./router";const app = createApp(App as any);app.use(router)app.mount('#app')src下创建router文件夹，项目往往需要模块化，所以代码尽量不要杂糅在一起
/router/index.ts
/router/index.tsimport { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";import NProgress from "nprogress";import "nprogress/nprogress.css";const modules: any = import.meta.glob("./modules/**/*.ts", { eager: true });const routes: Array<RouteRecordRaw> = [];for (const key in modules) { routes.push(...modules[key].default);}const router = createRouter({ history: createWebHashHistory(), // history 模式则使用 createWebHistory() routes,});router.beforeEach(async (_to, _from, next) => { NProgress.start(); next();});router.afterEach((_to) => { NProgress.done();});export default router;/router/typings.d.ts 路由meta格式受控
/router/typing.d.tsimport "vue-router";declare module "vue-router" { interface RouteMeta { // options title?: string; // every route must declare show?: boolean; // }}然后就是test下随便创建一个路由，对应的，views下创建相应的vue文件，App.vue给上router-view
test/index.ts
app.vue
test/index.vue
查看页面
页面正确显示，路由部署成功！
七.配置css预处理：less
yarn add less less-loader -D为了配置全局的less样式文件，同时引入fs模块
yarn add fs -D进入项目根目录的配置文件
位置：vite.config.ts -- css
// vite.config.tsimport vue from "@vitejs/plugin-vue";import { resolve } from "path";import fs from 'fs'function pathResolve(dir: string) { return resolve(process.cwd(), ".", dir);}// https://vitejs.dev/config/export default () => { const lessResources: Array<String> = [] fs.readdirSync('src/assets/styles').map((dirname) => { if (fs.statSync(`src/assets/styles/${dirname}`).isFile()) { lessResources.push(`@import "src/assets/styles/${dirname}";`) } }) return { ......, // css css: { preprocessorOptions: { less: { charset: false, additionalData: lessResources.join(''), modifyVars: { 'primary-color': '#0080FF', 'link-color': '#0080FF', 'border-radius-base': '4px', }, javascriptEnabled: true, }, }, }, };};这里配置的公共less文件路径为src/assets/styles，创建styles文件夹和index.less文件
进入index.less
上一篇：python的魔法方法是什么(python魔法方法详解)
下一篇：python TKinter的消息传递机制(python tkinter详解)
