build: switch to vite & tailwind build

haoranpb · Mar 1, 2021 · b7306c9 · b7306c9
1 parent ea9ae0a
commit b7306c9
Show file tree

Hide file tree

Showing 10 changed files with 606 additions and 6,818 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -3,9 +3,6 @@ module.exports = {
   env: {
     node: true,
   },
-  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/prettier'],
-  parserOptions: {
-    parser: 'babel-eslint',
-  },
+  extends: ['plugin:vue/vue3-essential', 'eslint:recommended'],
   rules: {},
 }
diff --git a/babel.config.js b/babel.config.js
diff --git a/index.html b/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="/favicon.ico" />
+    <script
+      src="https://kit.fontawesome.com/d0e0ef575b.js"
+      crossorigin="anonymous"
+    ></script>
+    <title>Flatmate</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -7,9 +7,10 @@
   ],
   "scripts": {
     "ci": "yarn install --frozen-lockfile --ignore-engines",
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "lint": "eslint src/**/*.{js,vue} functions/*.js *.js --fix",
     "emulate": "firebase emulators:start --import=./tmp-data --export-on-exit",
     "deploy:func": "firebase deploy --only functions",
     "env": "yarn env:unset && yarn env:set",
@@ -19,30 +20,25 @@
   },
   "dependencies": {
     "@tailwindcss/forms": "^0.2.1",
-    "@tailwindcss/postcss7-compat": "^2.0.2",
-    "autoprefixer": "^9.8.6",
+    "@vitejs/plugin-vue": "^1.1.5",
+    "@vue/compiler-sfc": "^3.0.7",
+    "autoprefixer": "^10.2.4",
     "core-js": "^3.6.5",
     "dayjs": "^1.10.4",
     "dompurify": "^2.2.6",
     "firebase": "^8.2.1",
     "firebaseui": "^4.7.3",
     "flatpickr": "^4.6.9",
-    "postcss": "^7.0.35",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
+    "postcss": "^8.2.6",
+    "tailwindcss": "^2.0.3",
     "validator": "^13.5.2",
+    "vite": "^2.0.4",
     "vue": "^3.0.7",
     "vue-router": "^4.0.2",
     "vuedraggable": "^4.0.1",
     "vuex": "^4.0.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.9",
-    "@vue/cli-plugin-eslint": "~4.5.9",
-    "@vue/cli-plugin-router": "~4.5.9",
-    "@vue/cli-service": "~4.5.9",
-    "@vue/compiler-sfc": "^3.0.7",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.3.0",
     "eslint-plugin-vue": "^7.4.0",

diff --git a/public/index.html b/public/index.html
diff --git a/src/firebaseConfig.js b/src/firebaseConfig.js
@@ -2,6 +2,7 @@ import firebase from 'firebase/app'
 import 'firebase/auth'
 import 'firebase/firestore'
 import 'firebase/functions'
+import { emulators } from '../firebase.json'
 
 /* cSpell:disable */
 firebase.initializeApp({
@@ -18,11 +19,10 @@ const functions = firebase.app().functions('europe-west1')
 const auth = firebase.auth()
 const db = firebase.firestore()
 
-if (process.env.NODE_ENV == 'development') {
-  const emulatorConfig = require('../firebase.json').emulators
-  functions.useEmulator('localhost', emulatorConfig.functions.port)
-  auth.useEmulator(`http://localhost:${emulatorConfig.auth.port}/`)
-  db.useEmulator('localhost', emulatorConfig.firestore.port)
+if (import.meta.env.DEV) {
+  functions.useEmulator('localhost', emulators.functions.port)
+  auth.useEmulator(`http://localhost:${emulators.auth.port}/`)
+  db.useEmulator('localhost', emulators.firestore.port)
 }
 
 // firebase can be replaced with smaller field

diff --git a/src/router/index.js b/src/router/index.js
@@ -5,7 +5,7 @@ import store from '@/store'
 import routes from '@/router/routes'
 
 const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
+  history: createWebHistory(import.meta.env.BASE_URL),
   routes,
 })
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,7 +1,7 @@
 const colors = require('tailwindcss/colors')
 
 module.exports = {
-  purge: ['./public/*.html', './src/**/*.{vue,ts}'],
+  purge: ['./*.html', './src/**/*.{vue,js}'],
   darkMode: 'class',
   theme: {
     extend: {

diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+})