Vue 때매 WSL v2부터 설치하기

Vue 시작하기

1. npm 및 Node.js 설치

1.1. WSL v2 설치

1.2. nodejs 다운로드, 설치(+초코라떼 같이 설치+파이썬 같이 설치)

2. CLI 설치

 

Vue 시작하기

https://developer.mozilla.org/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started

Vue 시작하기 - Web 개발 학습하기 | MDN

 

1. npm 및 Node.js 설치

https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line

Command line crash course - Learn web development | MDN

 

 

1.1. WSL v2 설치

커맨드라인으로 WSL v2 설치하기 - WSL 시작하기

 

 

 

 

 

PS C:\Users\purplike> cmd.exe /c ver

Microsoft Windows [Version 10.0.19045.4780]
PS C:\Users\purplike> wsl.exe --install
요청한 작업을 수행하려면 권한 상승이 필요합니다.
설치 중: 가상 머신 플랫폼
가상 머신 플랫폼이(가) 설치되었습니다.
설치 중: Linux용 Windows 하위 시스템
Linux용 Windows 하위 시스템이(가) 설치되었습니다.
설치 중: Linux용 Windows 하위 시스템
Linux용 Windows 하위 시스템이(가) 설치되었습니다.
설치 중: Ubuntu
Ubuntu이(가) 설치되었습니다.
요청한 작업이 잘 실행되었습니다. 시스템을 다시 시작하면 변경 사항이 적용됩니다.
PS C:\Users\purplike >

 

 

Ubuntu이(가) 이미 설치되어 있습니다.
Ubuntu을(를) 시작하는 중...
Installing, this may take a few minutes...
Please create a default UNIX user account. The username does not need to match your Windows username.
For more information visit: https://aka.ms/wslusers
Enter new UNIX username: purplike
New password:
Retype new password:
passwd: password updated successfully
Installation successful!
To run a command as administrator (user "root"), use "sudo <command>".
See "man sudo_root" for details.

Welcome to Ubuntu 22.04.3 LTS (GNU/Linux 5.15.153.1-microsoft-standard-WSL2 x86_64)

 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/advantage


This message is shown once a day. To disable it please create the
/home/purplike/.hushlogin file.
purplike@DESKTOP-1O0TJD2:~$

 

 

root는 안된다 이미있댄다

Enter new UNIX username: root
adduser: The user `root' already exists.

 

 

purplike@DESKTOP-1O0TJD2:~$ sudo apt update && sudo apt upgrade
[sudo] password for purplike:
Hit:1 http://archive.ubuntu.com/ubuntu jammy InRelease
Get:2 http://archive.ubuntu.com/ubuntu jammy-updates InRelease [128 kB]
Get:3 http://security.ubuntu.com/ubuntu jammy-security InRelease [129 kB]

...

123 upgraded, 1 newly installed, 0 to remove and 5 not upgraded.
71 standard LTS security updates
Need to get 101 MB of archives.
After this operation, 1739 kB of additional disk space will be used.
Do you want to continue? [Y/n] y

 

 

Get:1 http://archive.ubuntu.com/ubuntu jammy-updates/main amd64 motd-news-config all 12ubuntu4.6 [4352 B]
Get:2 http://archive.ubuntu.com/ubuntu jammy-updates/main amd64 libc6 amd64 2.35-0ubuntu3.8 [3235 kB]
Get:3 http://archive.ubuntu.com/ubuntu jammy-updates/main amd64 base-files amd64 12ubuntu4.6 [62.5 kB]

...

Processing triggers for install-info (6.8-4build1) ...
Processing triggers for libc-bin (2.35-0ubuntu3.8) ...
Processing triggers for man-db (2.10.2-1) ...
purplike@DESKTOP-1O0TJD2:~$

 

npm 패키지와 CLI를 사용하기 위해 다음과 같은 필요사항

1. Node.js 8.11 이상 설치

2. npm 또는 yarn

 

npm 및 Node.js 설치에 대해

https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line

 

Nodejs 다운로드, 설치 https://nodejs.org/en

Node.js — Run JavaScript Everywhere

설치중 초코라떼 설치하는거 체크하면 파워쉘 자동 뜨고 설치 - 파이썬도 미설치라 설치해줌

Forcing web requests to allow TLS v1.2 (Required for requests to Chocolatey.org)
Getting latest version of the Chocolatey package for download.
Not using proxy.                                                                                                        Getting Chocolatey from https://community.chocolatey.org/api/v2/package/chocolatey/2.3.0.                               Downloading https://community.chocolatey.org/api/v2/package/chocolatey/2.3.0 to C:\Users\EZEN\AppData\Local\Temp\chocolatey\chocoInstall\chocolatey.zip                                                                                         Not using proxy.                                                                                                        Extracting C:\Users\EZEN\AppData\Local\Temp\chocolatey\chocoInstall\chocolatey.zip to C:\Users\EZEN\AppData\Local\Temp\chocolatey\chocoInstall
Installing Chocolatey on the local machine
Creating ChocolateyInstall as an environment variable (targeting 'Machine')
  Setting ChocolateyInstall to 'C:\ProgramData\chocolatey'
WARNING: It's very likely you will need to close and reopen your shell
  before you can use choco.
Restricting write permissions to Administrators
We are setting up the Chocolatey package repository.
The packages themselves go to 'C:\ProgramData\chocolatey\lib'
  (i.e. C:\ProgramData\chocolatey\lib\yourPackageName).
A shim file for the command line goes to 'C:\ProgramData\chocolatey\bin'
  and points to an executable in 'C:\ProgramData\chocolatey\lib\yourPackageName'.

Creating Chocolatey CLI folders if they do not already exist.

chocolatey.nupkg file not installed in lib.
 Attempting to locate it from bootstrapper.
PATH environment variable does not have C:\ProgramData\chocolatey\bin in it. Adding...
경고: Not setting tab completion: Profile file does not exist at
'C:\Users\EZEN\Documents\WindowsPowerShell\Microsoft.PowerShell_profile.ps1'.
Chocolatey CLI (choco.exe) is now ready.
You can call choco from anywhere, command line or powershell by typing choco.
Run choco /? for a list of functions.
You may need to shut down and restart powershell and/or consoles
 first prior to using choco.
Ensuring Chocolatey commands are on the path
Ensuring chocolatey.nupkg is in the lib folder
Chocolatey v2.3.0
Upgrading the following packages:
python;visualstudio2019-workload-vctools
By upgrading, you accept licenses for the packages.
python is not installed. Installing...
Downloading package from source 'https://community.chocolatey.org/api/v2/'
Progress: Downloading chocolatey-compatibility.extension 1.0.0... 100%

...

Chocolatey upgraded 19/19 packages.
 See the log for details (C:\ProgramData\chocolatey\logs\chocolatey.log).

Upgraded:
 - chocolatey-compatibility.extension v1.0.0
 - chocolatey-core.extension v1.4.0
 - chocolatey-dotnetfx.extension v1.0.1
 - chocolatey-visualstudio.extension v1.11.1
 - chocolatey-windowsupdate.extension v1.0.5
 - dotnetfx v4.8.0.20220524
 - KB2919355 v1.0.20160915
 - KB2919442 v1.0.20160915
 - KB2999226 v1.0.20181019
 - KB3033929 v1.0.5
 - KB3035131 v1.0.3
 - python v3.12.5
 - python3 v3.12.5
 - python312 v3.12.5
 - vcredist140 v14.40.33810
 - vcredist2015 v14.0.24215.20170201
 - visualstudio2019buildtools v16.11.39
 - visualstudio2019-workload-vctools v1.0.1
 - visualstudio-installer v2.0.3
Type ENTER to exit:

 

Pretter 설치

PS C:\Users\purplike> npm install --save-dev prettier

added 1 package in 2s

1 package is looking for funding
  run `npm fund` for details

 

PS C:\Users\purplike> npx prettier
Usage: prettier [options] [file/dir/glob ...]

By default, output is written to stdout.
Stdin is read if it is piped to Prettier and no files are given.

Output options:

  -c, --check              Check if the given files are formatted, print a human-friendly summary
                           message and paths to unformatted files (see also --list-different).
  -l, --list-different     Print the names of files that are different from Prettier's formatting (see also --check).
  -w, --write              Edit files in-place. (Beware!)
                          
...

 

2. Vue CLI 설치

PS C:\Users\purplike> npm install --global @vue/cli
npm warn deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm warn deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm warn deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
...
added 852 packages in 45s

74 packages are looking for funding
  run `npm fund` for details

 

Vue 새 프로젝트 생성

PS D:\workspaces\vue> npm create vue@latest
Need to install the following packages:
create-vue@3.10.4
Ok to proceed? (y) y


> npx
> create-vue


Vue.js - The Progressive JavaScript Framework

√ Project name: ... vue-project
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes
√ Add Vue DevTools 7 extension for debugging? (experimental) ... No / Yes

Scaffolding project in D:\workspaces\vue\vue-project...

Done. Now run:

  cd vue-project
  npm install
  npm run format
  npm run dev

 

D드라이브에 생성