如何使用Vue3+Vite+Tailwindcss+Pug爽快的开发前端页面 - 佰阅部落

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

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

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

npm init vite-app 项目名 #cd 项目名npm installnpm 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秒才得到反馈。

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!

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

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

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

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

本文章由 flowerss 抓取自RSS，版权归源站点所有。

查看原文：如何使用Vue3+Vite+Tailwindcss+Pug爽快的开发前端页面 - 佰阅部落