• 欢迎访问佰阅部落,本站为优质开源程序分享站,所有自研项目均开源免费,可在Github查看源码。 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧
  • 欢迎积极参与讨论、反馈问题

如何使用Vue3+Vite+Tailwindcss+Pug爽快的开发前端页面

教程 佰阅部落 1个月前 (09-25) 429次浏览
文章目录[隐藏]

Vite工具当前已支持vue3.0的自动化环境部署,它有着让小白开箱即用的独特优势,让开发者再也不用去折腾webpack这样预先设置的专业打包工具,同时按需加载的瞬时反馈,在实际开发体验中非常出色。Tailwindcss则是当前开发者们最喜欢的css框架之一,以其语义化CSS的模式,让开发者可以在标签里快速写出前端样式,如果说stylus是终极的css原生工具,那tailwindcss则可以说是终极的语义化css工具。本篇就来实践下最潮流、最前沿、最爽的前端开发环境。

0. 准备条件

  • 电脑安装好Node环境
  • Vscode软件

1. 环境部署

第一步:首先是使用vite工具,创建vue3.0的初始化项目:

npm init vite-app 项目名 #
cd 项目名
npm install
npm run dev


这样就会非常快速的搭建好一个基于vue3.0的项目,如图效果。

如果是以前,使用webpack到这一步的门槛极高,可以对比下初始化下package包里的内容:

vite再也不用去配置各种vue-loader\css-loder等等,真正的开箱即用,打破了开发门槛。

第二步:安装好tailwindcss包以及各种环境配置。
首先使用npm安装tailwindcss:

npm install tailwindcss pug

这里面的pug是为了让vue-template里支持pug语法。
然后将原来项目的index.css修改为:

@tailwind base;

@tailwind components;

@tailwind utilities;

然后新建postcss.config.js,内容为:

module.exports = {
    plugins: [
      require('tailwindcss'),
      require('autoprefixer'),
    ]
  }

之后新建tailwind.config.js,内容为:

module.exports = {
  future: {
    // removeDeprecatedGapUtilities: true,
    // purgeLayersByDefault: true,
  },
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

这部分参考自tailwindcss官网。

第三步:vscode插件设置

在vscode插件里搜索Tailwind CSS IntelliSense并安装,该插件可以在写代码的时候,自动给出tailwind的相关标签,属于必备。

插件安装好之后,在vscode配置文件里修改,也就是直接编辑setting.json,添加tailwind的配置:

    "tailwindCSS.includeLanguages": {
        "plaintext": "html"
    },
    "tailwindCSS.emmetCompletions": true,

另外还可以安装Browser Preview这款插件,可以在vscode里打开浏览器,左侧写代码,右侧瞬时反馈,感觉非常爽。
完成以上步骤,你就可以愉快的写代码里,借助Vite的瞬时反馈,用Tailwincss修改前端界面,已经不再像以前webpack那样等待1或2秒才得到反馈。

2. 代码展示

<template lang='pug'>
div.bg-gray-500.h-screen.pt-10
  .flex.max-w-sm.mx-auto.p-6.rounded-lg.bg-white
    .flex-shrink-0
      img.h-12.w-12(src='../assets/logo.png')
    .ml-6
      h4.text-xl.text-gray-900.leading-tight.font-serif ChitChat
      p.text-base.text-gray-600.leading-normal You have a message!

</template>


上述代码,不论是先写好样式再去修改功能逻辑,还是写好功能逻辑,再去修改样式,都是可以的。一般我们做前后端全栈开发,后端的主要核心是设计好数据表,接口调用基本无脑操作,而前端需要用到Adobe Xd这样的原型设计工具,也是重中之重,好的原型设计,可以节省写代码的时间。对于前端而言,页面如何展示,基本都是盖房子思维,从头到脚一步步来,当然这里的代码复用性是非常高的,只要以前写过类似vue模块组件,就可以直接复用。因此,写代码不是最耗时的事情,打磨好原型才是最耗时的。

3. 前端原型如何打磨?如何获取设计灵感?


我们借助上述开发环境,实现了实时反馈的一个前端开发环境,Tailwindcss的语义化css工具箱,就是我们最趁手的工具。想要打磨历练,当然是参考优秀页面,用这个工具去实现一遍,参与的越多,模块组件就越多。除了常见的一些页面外,我们可以上dribbble、behance这些网站,用代码实现设计者们的创作。

笔者曾经有一段时间不写代码,专门使用Adobe Xd模仿了一阵子这些优秀的设计,从布局思路感悟了一些潮流设计,这样做可以更好的帮助我们从整体上把握代码架构。从模仿到超越,经历越多,就越有想法,这就是灵感诞生最快的途径。

4. 小结

从现有的发展角度而言,不论是前端还是后端,初始化环境的门槛越来越低,让开发者们不再局限在琐碎的起步上。在没有这些工具之前,我们的通用做法是Docker容器化开发,虽然是万能的做法,但是实际并不会经常周转这些开发环境,尤其是vue的开发环境,到目前为止vite的启动,远比容器化方便的多。容器化适合组合式开发环境,比如mysql容器+adminer数据库管理容器+nginx容器等组合,这种就非常有实际意义了。本篇搭建的tailwindcss环境,设置简单,开箱即用,往后可以拿来实现单页应用的开发或者临摹dribbble上一些优秀的设计。


佰阅部落 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:如何使用Vue3+Vite+Tailwindcss+Pug爽快的开发前端页面
赞一下 (1)
佰阅部落
关于作者:
爱折腾,爱学习,用心分享各种实用搭建教程,让优质web程序脱颖而出,欢迎订阅!