1 min read

vue cli 3 working log v2

Mallim •

Instructions below are based on the following:

  • vue cli 3.10.0
  • Tailwindcss 1.0.4

Install the vue CLI

yarn global add @vue/cli

Check vue is load and ready

vue --version

vue create project

  • frontend for vuejs, backend for Spring Boot
vue create <project_name>\frontend
  • Please pick a preset: Manually select features
  • Check the features needed for your project: Babel, CSS Pre-processors
  • Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
  • Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files

Run and check

cd <project_name>\frontend
yarn serve

Installing and configuring tailwindcss

$ vue add @ky-is/tailwind

Post tailwindcss plugin

  • Rename @/assets/styles/tailwind.postcss to @/assets/styles/tailwind.scss
  • Add tw- prefix

Add tw prefix to tailwind.config.js

module.exports = {
  prefix: "tw-",
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
};

Install fontawesome by plugin

$ vue add fontawesome

Install buefy by plugin

by vue-cli-plugin-buefy

$ vue add buefy

Modify main.js

Vue.use(Buefy, { defaultIconPack: "fas", defaultIconComponent: "font-awesome-icon" });

References