Vue3环境安装
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
source /home/cc/.bashrc
command -v nvm
nvm --version
# 安装指定的版本
nvm install v12.22.12
# 安装当前稳定的LTS版本
nvm install --lts
# 切换版本
nvm use v20.11.0
# 设置默认版本
nvm alias default v20.11.0
# 查看本地已安装的Node版本
nvm ls
# 查看所有可用版本
nvm ls-remote
# 独立安装pnpm
wget -qO- https://get.pnpm.io/install.sh | ENV="$HOME/.bashrc" SHELL="$(which bash)" bash -
# 通过npm安装pnpm
npm install -g pnpm
# 查看当前镜像源
npm config list
pnpm config get registry
https://registry.npmmirror.com/
# 切换镜像源,不要再使用：https://registry.npm.taobao.org
npm config set registry https://registry.npmmirror.com
# 安装yarn
npm install --global yarn
yarn --version
pnpm create vue@latest
../../.pnpm-store/v3/tmp/dlx-2655 | +1 +
../../.pnpm-store/v3/tmp/dlx-2655 | Progress: resolved 1, reused 1, downloaded 0, added 1, done
Vue.js - The Progressive JavaScript Framework
✔ Project name: … hello-vue3
✔ 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? › Cypress
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
Scaffolding project in /mnt/d/Study/WebProjects/hello-vue3...
Done. Now run:
cd hello-vue3
pnpm install
pnpm format
pnpm dev
cd hello-vue3
pnpm install
Packages: +559
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 594, reused 346, downloaded 213, added 559, done
node_modules/.pnpm/vue-demi@0.14.6_vue@3.4.13/node_modules/vue-demi: Running postinstall script, done in 1.2s
node_modules/.pnpm/esbuild@0.19.11/node_modules/esbuild: Running postinstall script, done in 652ms
node_modules/.pnpm/cypress@13.6.2/node_modules/cypress: Running postinstall script, done in 19.2s
dependencies:
+ pinia 2.1.7
+ vue 3.4.13
+ vue-router 4.2.5
devDependencies:
+ @rushstack/eslint-patch 1.6.1
+ @tsconfig/node18 18.2.2
+ @types/jsdom 21.1.6
+ @types/node 18.19.7 (20.11.2 is available)
+ @vitejs/plugin-vue 4.6.2 (5.0.3 is available)
+ @vitejs/plugin-vue-jsx 3.1.0
+ @vue/eslint-config-prettier 8.0.0 (9.0.0 is available)
+ @vue/eslint-config-typescript 12.0.0
+ @vue/test-utils 2.4.3
+ @vue/tsconfig 0.5.1
+ cypress 13.6.2
+ eslint 8.56.0
+ eslint-plugin-cypress 2.15.1
+ eslint-plugin-vue 9.20.1
+ jsdom 23.2.0
+ npm-run-all2 6.1.1
+ prettier 3.2.2
+ start-server-and-test 2.0.3
+ typescript 5.3.3
+ vite 5.0.11
+ vitest 1.2.0
+ vue-tsc 1.8.27
Done in 1m 29.6s
pnpm run dev
> hello-vue3@0.0.0 dev /mnt/d/Study/WebProjects/hello-vue3
> vite
VITE v5.0.11 ready in 9279 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
h
Shortcuts
press r + enter to restart the server
press u + enter to show server url
press o + enter to open in browser
press c + enter to clear console
press q + enter to quit
q
# 发布生产
pnpm run build
pnpm create vite
../../.pnpm-store/v3/tmp/dlx-1988 | +1 +
../../.pnpm-store/v3/tmp/dlx-1988 | Progress: resolved 1, reused 1, downloaded 0, added 1, done
✔ Project name: … hello-vite
✔ Select a framework: › Vue
✔ Select a variant: › TypeScript
Scaffolding project in /mnt/d/Study/WebProjects/hello-vite...
Done. Now run:
cd hello-vite
pnpm install
pnpm run dev
cd hello-vite
pnpm install
WARN GET https://registry.npmmirror.com/typescript error (ERR_SOCKET_TIMEOUT). Will retry in 10 seconds. 2 retries left.
WARN GET https://registry.npmmirror.com/@volar%2Ftypescript error (ERR_SOCKET_TIMEOUT). Will retry in 10 seconds. 2 retries left.
WARN GET https://registry.npmmirror.com/fsevents error (ERR_SOCKET_TIMEOUT). Will retry in 10 seconds. 2 retries left.
Packages: +49
+++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 84, reused 49, downloaded 0, added 49, done
dependencies:
+ vue 3.4.13
devDependencies:
+ @vitejs/plugin-vue 4.6.2 (5.0.3 is available)
+ typescript 5.3.3
+ vite 5.0.11
+ vue-tsc 1.8.27
Done in 2m 49.5s
pnpm run dev
> hello-vite@0.0.0 dev /mnt/d/Study/WebProjects/hello-vite
> vite
VITE v5.0.11 ready in 3956 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
curl -fsSL https://bun.sh/install | bash
bun --version
1.0.22
bun --revision
1.0.22+b400b36ca
bun upgrade
bun create vue@latest
bun install
bun run dev
bun run build
从其他机器上备份安装好的bun
tar --xattrs --xattrs-include=* -zcvf bun.tar.gz ~/.bun
解压备份
tar --xattrs --xattrs-include=* -zxvf bun.tar.gz
配置环境变量
vi ~/.bashrc
export BUN_INSTALL="$HOME/.bun"
export PATH=$BUN_INSTALL/bin:$PATH
___MY_VMOPTIONS_SHELL_FILE="${HOME}/.jetbrains.vmoptions.sh"; if [ -f "${___MY_VMOPTIONS_SHELL_FILE}" ]; then . "${___MY_VMOPTIONS_SHELL_FILE}"; fi
source vi .bashrc
参考
如果Element Plus、Ant Design Vue增加对bun的支持，个人认为bun更好，速度快是我最好的体验。
