yoosonchan / template-vue-ts

PROJECT

Installation(yarn)

Create project with Vite

Using vue-ts template

yarn create vite PROJECT_NAME --template vue-ts
cd PROJECT_NAME

Install UI frameworks

Vue version >= 3.2.0

Install Arco Design

Install

yarn add --dev @arco-design/web-vue

On-demand Import

yarn add --dev unplugin-vue-components unplugin-auto-import 

Edit vite.config.ts file:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite';
import { ArcoResolver } from 'unplugin-vue-components/resolvers';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ArcoResolver()],
    }),
    Components({
      resolvers: [
        ArcoResolver({
          sideEffect: true
        })
      ]
    })
  ]
});

Install Tailwind CSS

Install Tailwind CSS

yarn add --dev tailwindcss postcss autoprefixer
yarn tailwindcss init -p

Configure the template paths

tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS

./src/style.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Install Vika

yarn add @vikadata/vika

Get token: User Profile -> My Setting -> Developer -> API Token -> Copy

Document

Install dependencies

yarn

Test whether it is executable

yarn dev

Build project

yarn build

Install Test Tool

Vitest

Installation

yarn add -D vitest

Configuration

• package.json:

{
  "scripts": {
    "test": "vitest"
  }
}

• vite.config.ts

To update the vite.config.ts file, and add a test configuration. According to the include configuration of the tests object, we need to create a folder named tests in the root path.

/// <reference types="vitest" />
import { defineConfig } from 'vite'

export default defineConfig({
  test: {
    include: ['**/tests/**/*.spec.[tj]s']
  }
})

Verify availability

• To creat a *.spec.ts file:

import { expect, test } from 'vitest'

test('adds 1 + 2 to equal 3', () => {
  expect(1 + 2).toBe(3)
})

• Run test

yarn test

Deploying a staic site

Github pages

Config base value in the vite.config.ts file

export default defineConfig({
  base: '/template-vue-ts/',
})

Create a deploy.yml file for github page

the .github/workflows/deploy.yml file:

# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow one concurrent deployment
concurrency:
  group: "pages"
  cancel-in-progress: true

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Set up Node and Install dependencies
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: "npm"
      - run: npm install --global yarn
      - run: yarn
      - name: Build
        run: yarn build
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v2
        with:
          # Upload dist repository
          path: "./dist"
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2