位置: 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详解)

  • 房地产开发企业简易计税方法 可以扣除吗
  • 农产品进项税额转出怎么算
  • 税务师事务所是代理记账公司吗
  • 取暖费摊销期限是多少年
  • 计提代扣个人工会经费怎么做账
  • 跨月专用发票怎么冲销
  • 小型微利企业申请
  • 营改增 旅游服务
  • 预付房租租金如何做账
  • 业务招待费的进项怎么算
  • 公司自建房屋如何进行入账?
  • 支付给供应商的现金属于什么活动
  • 按照税收一般规定计算的折旧摊销金额
  • 不需要缴纳增值税和免税的区别
  • 销售折扣在备注栏注明的可以扣除吗
  • 员工给公司代垫的款项分录
  • bios密码忘记了怎么清除,放电不行
  • 车辆拍卖怎么过户
  • 中秋福利费会计分录
  • 试用产品无法收集
  • 公司过年买的鞭炮可以入账吗
  • session失效的方法
  • 坏狼变身记简介
  • 购货方获得现金折扣的会计分录怎么写
  • 汇票到期收到款项会计分录
  • 跨境服务免征增值税申报怎么填
  • rtlcpl.exe
  • 白兰花的养殖方法和注意事项和病虫害
  • 如何使专业人员的工作卓有成效读后感悟
  • 期间损益结转都结转什么
  • 债券的回购
  • 老板垫付的员工怎么入账
  • PHP:mdecrypt_generic()的用法_Mcrypt函数
  • form action target
  • 银行本票存款和银行存款的区别
  • Madonna della Corona教堂,意大利 (© Volodymyr Kalyniuk/Alamy)
  • 蒙特利尔 攻略
  • 经营性存款人违反规定
  • php如何使用
  • idea如何运行springboot项目
  • php处理excel
  • ai绘画图片
  • 旅行社差额征税税率是多少
  • python web开发方向的第三方库有哪些
  • 印花税税目税率表新旧对比
  • 一般纳税人零申报报税流程
  • 制作海报属于什么行业
  • sql2008r2怎么用
  • 期初余额调整怎么做凭证
  • case语句怎么执行
  • 小微企业减免的增值税账务处理
  • 专利技术转让损失会计分录
  • 机械设备预付款比例
  • 不签订购销合同的后果
  • 期初固定资产算收入吗
  • 常见的递延所得税
  • 小规模如何申报1个点
  • 应付账款跟应收的区别
  • 普票抵扣
  • 关闭 windows
  • 在windowsxp中删除文件
  • ntfs跟fat32
  • 判断自己的脸型
  • Win10 Mobile 10572新增实用功能:未接电话会显示响铃的次数
  • win10应用默认
  • Linux的文件系统采用树形结构()
  • win7如何关闭ie浏览器
  • sparsomycin
  • sed 处理多行
  • xcode 导入sdk
  • unity获取父节点
  • javascript创建对象的几种方法
  • python整理表格不用入门
  • 手把手教你打造一个花灯笼,老师看到肯定惊喜
  • 水利基金税率‰6什么时候调整
  • 如何找回电子税务局企业密码
  • 中国的消费税率是多少
  • 河南省优秀班主任2022
  • 北京税务网上营业厅官网
  • 绵阳税务局咨询电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设