vue3

Vue3 project.

Build development environment

Install Visual Studio Code, Node.js, Git, [TortoiseGit]

Create a new repository in GitHub

Repository template

No template

Owner / Repository name

my-id/my-repo-name

Description

Vue3 project.

Public · Private

◉ Public

☉ Private

Initialize this repository with

☑ Add a README file

☑ Add .gitignore

.gitignore template: Node ▾

☑ Choose a license

License: GNU General Public License v3.0 ▾

Create repository

Clone repository from GitHub

# PowerShell / Git Bash
git clone https://github.com/my-id/my-repo-name.git

Create project

Install yarn

# PowerShell
npm install --global yarn

Scaffolding Vite project

# PowerShell
yarn create @vitejs/app <project-name> --template vue-ts

Install extensions for Visual Studio Code

Install Volar, [Code Spell Checker], [git-commit-plugin]

Install packages

# PowerShell
yarn install

Complication project

# PowerShell
yarn run build

[Vue SFC]

Vue Single-File Components (aka *.vue files, abbreviated as SFC) is a special file format that allows us to encapsulate the template, logic, and styling of a Vue component in a single file.

# PowerShell
yarn add --dev vite-plugin-singlefile

// vite.config.ts
import { viteSingleFile } from "vite-plugin-singlefile"

export default defineConfig({
 plugins: [vue(), viteSingleFile()],
 build: {
  target: "esnext",
  outDir: 'dist',
  assetsInlineLimit: 100000000,
  chunkSizeWarningLimit: 100000000,
  cssCodeSplit: false,
  brotliSize: false,
  rollupOptions: {
   inlineDynamicImports: true,
   output: {
    manualChunks: () => "everything.js",
   },
  },
 },
})

Compile without adding hash code suffix to resource files

// vite.config.ts
export default defineConfig({
  build: {
    target: "esnext",
    outDir: 'dist',
    assetsInlineLimit: 100000000,
    chunkSizeWarningLimit: 100000000,
    cssCodeSplit: false,
    brotliSize: false,
    rollupOptions: {
      inlineDynamicImports: true,
      output: {
        manualChunks: () => 'everything.js',
        entryFileNames: 'assets/[name].js',
        chunkFileNames: 'assets/[name].js',
        assetFileNames: 'assets/[name].[ext]'
      }
    }
  }
})

Live Server

# PowerShell
vite

🛈[Network: use `--host` to expose]

// vite.config.ts
export default defineConfig({
  server: {
    host: '0.0.0.0'
  },
  build: {
    target: "esnext",
    outDir: 'dist',
    assetsInlineLimit: 100000000,
    chunkSizeWarningLimit: 100000000,
    cssCodeSplit: false,
    brotliSize: false,
    rollupOptions: {
      inlineDynamicImports: true,
      output: {
        manualChunks: () => 'everything.js',
        entryFileNames: 'assets/[name].js',
        chunkFileNames: 'assets/[name].js',
        assetFileNames: 'assets/[name].[ext]'
      }
    }
  }
})

timkayhou / vue3 Goto Github PK

vue3's Introduction

Build development environment

Create a new repository in GitHub

Repository template

Owner / Repository name

Description

Public · Private

Initialize this repository with

Create repository

Clone repository from GitHub

Create project

Install yarn

Install extensions for Visual Studio Code

Install packages

Complication project

[Vue SFC]

Compile without adding hash code suffix to resource files

Live Server

🛈[Network: use --host to expose]

vue3's People

Contributors

Watchers

Recommend Projects

Recommend Topics

Recommend Org

🛈[Network: use `--host` to expose]