Project Initialization

This guide covers environment setup for Vue 3 projects on Windows, including Node.js configuration, build toolchain setup, and troubleshooting for common development errors.

Environment Setup

Node.js Installation

Download Node.js from the official distribution page:

https://nodejs.org/dist/v14.16.1/

To check your system architecture:

node -p "process.arch"

Windows Build Tools Instalaltion

The build tools package installs Python and Visual Studio Build Tools:

npm install --global --production windows-build-tools --registry=http://registry.npm.taobao.org

For .NET SDK 4.5.2:

https://download.microsoft.com/download/4/3/B/43B61315-B2CE-4F5B-9E32-34CCA07B2F0E/NDP452-KB2901951-x86-x64-DevPack.exe

Install a specific version if compatibility issues arise:

npm install --global --production windows-build-tools@4.0.0 --registry=http://registry.npm.taobao.org

node-gyp Installation

npm install --global node-gyp --registry=http://registry.npm.taobao.org

or

yarn global add node-gyp

Dependency Installation

Using Yarn

yarn install --registry=http://registry.npm.taobao.org

Using npm

Permanently set the registry:

npm config set registry http://registry.npm.taobao.org

Verify the setting:

npm config get registry

Then install dependencies:

npm install

If npm install hangs on fetchMetadata, the registry configuration is not applied correctly. Set it explicitly:

npm config set registry http://registry.npm.taobao.org

Common Errors and Solutions

Incompatible Module Version

error sockjs-client@1.6.0: The engine "node" is incompatible with this module. Expected version ">=12". Got "10.24.1"

Rebuild native modules:

npm rebuild node-sass

JavaScript Heap Out of Memory

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

Increase Node.js memory allocation by modifying the batch files in node_modules/.bin:

vue-cli-service.cmd:

@echo off
"%_prog%"  "%dp0% --max-old-space-size=4096 \..\@vue\cli-service\bin\vue-cli-service.js" %*

webpack.cmd:

@echo off
node --max-old-space-size=4096 "%dp0%\..\webpack\bin\webpack.js" %*

webpack-dev-server.cmd:

@echo off
node --max-old-space-size=4096 "%dp0%\..\webpack-dev-server\bin\webpack-dev-server.js" %*

webpack-bundle-analyzer.cmd:

@echo off
node --max-old-space-size=4096 "%dp0%\..\webpack-bundle-analyzer\lib\bin\analyzer.js" %*

If issues persist, upgrade Node.js to v14.16.1 or later.

Module Linking

Link base components from src/components/:

npm link

Link library modules from the UI/ dircetory:

npm link deya-lib-basic

PowerShell Execution Policy

When PowerShell blocks script execution, check the current policy:

Get-ExecutionPolicy

Set the policy to allow local scripts:

Set-ExecutionPolicy RemoteSigned

Enter Y to confirm.

Vue 3 Development Plugins

Install the setup extension plugin for Vue 3:

npm i vite-plugin-vue-setup-extend -D

Add Vue DevTools for debugging:

import vueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
})