位置: IT常识 - 正文

手把手,完整的从0搭建vite-vue3-ts项目框架:配置less+svg+pinia+vant+axios(手把手的教)

编辑:rootadmin
项目同步git:https://gitee.com/lixin_ajax/vue3-vite-ts-pinia-vant-less.git 觉得有帮助的小伙伴请点下小心心哦 为避免赘述,过于基础的点会直接省略或贴图,比如创建文件夹/文件的路径/路由一类 配置相应功能,也尽量只贴相关代码,并不代表整个 ...

推荐整理分享手把手,完整的从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手把手,完整的从0搭建vite-vue3-ts项目框架:配置less+svg+pinia+vant+axios(手把手的教)

五.配置路径别名@

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 -D

main.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

本文链接地址:https://www.jiuchutong.com/zhishi/304609.html 转载请保留说明!

上一篇:python的魔法方法是什么(python魔法方法详解)

下一篇:python TKinter的消息传递机制(python tkinter详解)

  • iqoo8怎么换锁屏壁纸(vivoiqoo锁屏怎么换)

    iqoo8怎么换锁屏壁纸(vivoiqoo锁屏怎么换)

  • 通话转移功能怎么设置(通话转移功能怎么设置oppo)

    通话转移功能怎么设置(通话转移功能怎么设置oppo)

  • 手机qq字体怎么改(手机qq字体怎么改大小)

    手机qq字体怎么改(手机qq字体怎么改大小)

  • 苹果正方形的按钮在哪(苹果正方形的按钮怎么关闭)

    苹果正方形的按钮在哪(苹果正方形的按钮怎么关闭)

  • 电脑上的ss接口有几种(电脑上的ss接口可以插耳机吗)

    电脑上的ss接口有几种(电脑上的ss接口可以插耳机吗)

  • 两个维迈通如何对讲(维迈通和其他牌子能联机吗?)

    两个维迈通如何对讲(维迈通和其他牌子能联机吗?)

  • 步步高家教机黑屏原因(步步高家教机黑屏死机)

    步步高家教机黑屏原因(步步高家教机黑屏死机)

  • 微信电话费流量吗(微信电话费流量还是打视频费流量)

    微信电话费流量吗(微信电话费流量还是打视频费流量)

  • 电脑强行关闭程序按什么键(电脑强行关掉程序)

    电脑强行关闭程序按什么键(电脑强行关掉程序)

  • qq卡顿怎么解决(qq很卡顿怎么办)

    qq卡顿怎么解决(qq很卡顿怎么办)

  • 华为p30有温度计功能吗(华为p30测温)

    华为p30有温度计功能吗(华为p30测温)

  • 小米k20pro和尊享版的区别(小米k20pro尊享版)

    小米k20pro和尊享版的区别(小米k20pro尊享版)

  • 整理数据的方式有(整理数据的主要方法有哪些)

    整理数据的方式有(整理数据的主要方法有哪些)

  • 华为手环只能华为手机用吗(华为手环只能华为手机吗)

    华为手环只能华为手机用吗(华为手环只能华为手机吗)

  • 访客限速多少kb合适(访客限速多少mbps合适)

    访客限速多少kb合适(访客限速多少mbps合适)

  • 苹果11怎么设置暗黑模式(苹果11怎么设置电量显示100%)

    苹果11怎么设置暗黑模式(苹果11怎么设置电量显示100%)

  • wps字体二次加粗(wps加粗字体设置在哪里)

    wps字体二次加粗(wps加粗字体设置在哪里)

  • 云管端是什么意思(云管端互联网软件有限公司)

    云管端是什么意思(云管端互联网软件有限公司)

  • vivo怎么关闭呼叫转移(vivo怎么取消呼叫限制)

    vivo怎么关闭呼叫转移(vivo怎么取消呼叫限制)

  • 支付宝账号是电话号码吗(支付宝账号是电话号码还是邮箱)

    支付宝账号是电话号码吗(支付宝账号是电话号码还是邮箱)

  • iqoo支不支持无线充电(iqoo支持无线充电的手机吗?)

    iqoo支不支持无线充电(iqoo支持无线充电的手机吗?)

  • 监控摄像头视频线接法(石膏板吊顶怎么安装监控摄像头视频)

    监控摄像头视频线接法(石膏板吊顶怎么安装监控摄像头视频)

  • 播放ppt快捷键(怎么停止ppt自动播放)

    播放ppt快捷键(怎么停止ppt自动播放)

  • 怎么使用本地帐户安装 Win11(使用本地账户登录什么意思)

    怎么使用本地帐户安装 Win11(使用本地账户登录什么意思)

  • 本期收入和本期减除费用
  • 房地产印章图片
  • 什么是增值税一般纳税人
  • 税后利润和净利润是一样的吗
  • 增值税专票税率1%
  • 进项认证以后如何开具红字信息表
  • 租赁类发票可以不写单价数量
  • 付给非公司员工提成可以走委托代销商品吗
  • 专利年费是不是只能一项一项交
  • 高档化妆品增值税税率是13%
  • 基本户零流水如何处理
  • 个人厂房租赁税率是多少
  • 进项转出发票是否还可以转回抵扣做分录呢?
  • 广告服务怎么做分录
  • 企业减免6%的税的营业范围有哪些?
  • 退回多交企业所得税分录
  • 发票抄报逾期如何处罚
  • 财税〔2017〕39号
  • 金税四期什么时候结束
  • 将商业承兑汇票进行贴现 符有追索权的会计分录
  • 商品流通企业代表企业
  • 不动产进项税额怎么算
  • 资本增值是什么
  • 消费税怎样做分录
  • 出口转内销申报需要先做出口退税吗
  • 关于设备延期交付说明
  • 公允价值变动损益在利润表哪里
  • ipados15 支持机型
  • dir852迅雷路由器
  • 为什么在监狱拉屎都拉不方便
  • echarts w3c
  • linux 查看文件内容 转换字符编码
  • macOS Big Sur 11.3 开发者预览版/公测版 Beta 6正式发布
  • 财政性资金所得税
  • sec是什么文件
  • iconfonf
  • 前端实现文件下载功能
  • 职工参加生育保险
  • php去除字符串中的引号
  • 原生js实现promise.all
  • sessionn
  • afn取消请求
  • html零基础入门教程
  • vue2vue3的区别
  • 业务经费包括哪些内容
  • 企业从政府部门辞职流程
  • 北京社保月平均工资
  • 异地工程增值税按几个点预缴
  • 限额领料单属于什么凭证
  • 制造费用账户在月末一般没有余额
  • 增加固定资产原值后折旧
  • 红冲发票如何做账
  • 待处理财产损溢借贷增减方向
  • 零余额账户对账余额调节表
  • 企业买车计入什么科目
  • 费用包含但不限于
  • 在sql server中触发器不具有什么类型
  • mac安装mysql
  • mac清理所有数据
  • win7安装软件出现乱码
  • win8系统怎么激活
  • 提示explorer.exe
  • windows10如何设置windows7开始菜单
  • linux使用语言
  • 安卓opengl es
  • 批处理获取本地连接名称
  • Android Build.prop
  • python爬虫介绍
  • TNet Tasharen Networking
  • 10个JavaScript中易犯小错误
  • javascript模板
  • 一般纳税人开具的增值税普通发票和专用发票的区别
  • 税控盘登陆失败
  • 资产划转是什么会计科目
  • 国税总局网
  • 广西地方税务局2017年公务员拟录用
  • 深圳市地方税务局历任局长
  • 郑州房产交契税在哪里交
  • 佛山市国家税务局科长陈科长
  • 2o21年公租房
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设