使用Webstorm创建Vue3+tailwind css3项目

介绍

本文介绍如何使用Webstorm快速创建一个vue3+tailwind css3的项目。

步骤

前提条件：必须安装好npm等基础插件

1. 安装vue-cli
   使用命令安装vue-clinpm install -g @vue/cli

2. 使用vue-cli新建项目
   使用如下命令，创建一个名为demo的项目vue create demo

3. 使用npm安装tailwind css3
   使用命令安装tailwind3npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

4. 生成tailwind3配置文件
   使用命令生成tailwind配置文件npx tailwindcss init -p

5. 在tailwind.config.js中配置兼容vue
   要在tailwind.config.js中配置purge来忽略vue文件，内容如下：

   // tailwind.config.js
   
   module.exports = {
    purge: [
       './src/**/*.html',
       './src/**/*.vue',
       './src/**/*.jsx',
     ],
     darkMode: false, // or 'media' or 'class'
     theme: {
       extend: {},
     },
     variants: {
       extend: {},
     },
     plugins: [],
   }
   

效果展示

为了快速演示，我们直接在vue的hello world项目更改代码演示。

我们在vue示例页面，增加一个<p>标签，并用tailwind css来定义样式，代码如下：

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
  
<!--        这是一个使用tailwind css定义的样式（tw是我们自定义的前缀，避免和其他样式冲突）-->
        <p class="tw-text-2xl">测试Tailwind</p>
  
        <p>
            For a guide and recipes on how to configure / customize this project,<br>
            check out the
            <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
        </p>
        <h3>Installed CLI Plugins</h3>
        <ul>
            <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank"
                   rel="noopener">babel</a></li>
            <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank"
                   rel="noopener">eslint</a></li>
        </ul>
        <h3>Essential Links</h3>
        <ul>
            <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
            <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
            <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
            <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
            <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
        </ul>
        <h3>Ecosystem</h3>
        <ul>
            <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
            <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
            <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank"
                   rel="noopener">vue-devtools</a></li>
            <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
            <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'HelloWorld',
    props: {
        msg: String
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
    margin: 40px 0 0;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    display: inline-block;
    margin: 0 10px;
}

a {
    color: #42b983;
}
</style>

启动后，可以在浏览器里看到效果，截图如下：