WSL2에 vue 개발 환경 구축
WSL2 우분투 업데이트
$ sudo apt update
$ sudo apt upgrade
Node.js의 환경 구축
Microsoft 문서
nvm 설치
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 13527 100 13527 0 0 28537 0 --:--:-- --:--:-- --:--:-- 28537
=> Downloading nvm from git to '/home/nomura/.nvm'
=> Cloning into '/home/nomura/.nvm'...
remote: Enumerating objects: 288, done.
remote: Counting objects: 100% (288/288), done.
remote: Compressing objects: 100% (254/254), done.
remote: Total 288 (delta 33), reused 112 (delta 22), pack-reused 0
Receiving objects: 100% (288/288), 146.58 KiB | 422.00 KiB/s, done.
Resolving deltas: 100% (33/33), done.
=> Compressing and cleaning up git repository
=> Appending nvm source string to /home/nomura/.bashrc
=> Appending bash_completion source string to /home/nomura/.bashrc
=> Close and reopen your terminal to start using nvm or run the following to use it now:
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
우분투 재부팅
$ nvm --version
0.35.2
nodejs의 최신 버전 (15.5.0) 설치
$ nvm install 15.5.0
Downloading and installing node v15.5.0...
Downloading https://nodejs.org/dist/v15.5.0/node-v15.5.0-linux-x64.tar.xz...
################################################################################ 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v15.5.0 (npm v7.3.0)
Creating default alias: default -> 15.5.0 (-> v15.5.0)
$ node -v
v15.5.0
안정판을 설치하고 싶다면,
$ nvm install --lts
vue 설치
$ npm install -g @vue/cli
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: Moved to 'npm install @sideway/address'
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/[email protected]: Switch to 'npm install joi'
added 1373 packages, and audited 1374 packages in 1m
57 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
$ vue --version
@vue/cli 4.5.9
vue create [프로젝트 이름] 뒤에 vue 3을 선택합니다.
Vue CLI v4.5.9
? Please pick a preset:
Default ([Vue 2] babel, eslint)
❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features
Vue CLI v4.5.9
✨ Creating project in /home/nomura/sample.
🗃 Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
added 1269 packages, and audited 1270 packages in 41s
62 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
🚀 Invoking generators...
📦 Installing additional dependencies...
added 71 packages, and audited 1341 packages in 7s
68 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project sample.
👉 Get started with the following commands:
$ cd sample
$ npm run serve
WARN Skipped git commit due to missing username and email in git config, or failed to sign commit.
You will need to perform the initial commit yourself.
$ cd sample
$ npm run serve
> [email protected] serve
> vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
DONE Compiled successfully in 4468ms
Vite
Software Design 2021/1의 Vite를 설정해보십시오.
$ npm init vite-app vue-todo-list
Need to install the following packages:
create-vite-app
Ok to proceed? (y) y
Scaffolding project in /home/nomura/vue-todo-list...
Done. Now run:
cd vue-todo-list
npm install (or `yarn`)
npm run dev (or `yarn dev`)
$ cd vue-todo-list/
$ npm install
npm WARN deprecated [email protected]: Please update to v 2.2.x
added 326 packages, and audited 327 packages in 20s
22 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
$ npm run dev
> [email protected] dev
> vite
[vite] Optimizable dependencies detected:
vue
Dev server running at:
> Local: http://localhost:3000/
> Network: http://172.30.106.45:3000/
액세스해 보면 다음과 같은 화면이 표시되었습니다.
Reference
이 문제에 관하여(WSL2에 vue 개발 환경 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Toshiaki0315/items/1ab4e479007bb0f76f06텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)