nvm的安装
nvm 是一个 nodejs 版本管理工具。
使用 nvm 可以安装不同版本的 nodejs。也能够实时的切换不同的版本的NodeJS。
官方文档:https://github.com/nvm-sh/nvm
安装命令:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nodejs
我们使用nodejs,主要是使用npm工具,用它来管理项目的很多依赖。
ubuntu安装nodejs:
sudo apt install nodejs npm
官方推荐的安装方式:https://nodejs.org/en/download/package-manager
# installs fnm (Fast Node Manager)
curl -fsSL https://fnm.vercel.app/install | bash# download and install Node.js
fnm use --install-if-missing 20# verifies the right Node.js version is in the environment
node -v # should print `v20.14.0`# verifies the right NPM version is in the environment
npm -v # should print `10.7.0`
二进制文件安装:https://nodejs.org/en/download/prebuilt-binaries
解压:
tar Jxvf node-v20.14.0-linux-x64.tar.xz
sudo mv node-v20.14.0-linux-x64 /usr/local/
添加环境变量:
export PATH=/usr/local/node-v20.14.0-linux-x64/bin:$PATH
查看版本:
nvm -v
node -v
nodejs 配置
默认 npm 的依赖都是从国外的服务器下载的,速度比较慢,所以我们可以切换为国内的镜像。
配置国内源:
npm config set registry https://registry.npmmirror.com
配置目录:
mkdir ~/nodejs/node_global
mkdir ~/nodejs/node_cachenpm config set prefix "/home/zhangdapeng/nodejs/node_global"
npm config set cache "/home/zhangdapeng/nodejs/node_cache"
配置环境变量:
export PATH=/home/zhangdapeng/nodejs/node_global/bin:$PATH
全局安装:
npm install -g pnpm
创建vue项目
vite是一个非常流行的项目管理工具,比传统的 webpack 快了非常多。
https://vitejs.cn/vite3-cn/guide/#scaffolding-your-first-vite-project
使用 NPM:$ npm create vite@latest
使用 Yarn:$ yarn create vite
使用 PNPM:$ pnpm create vite
primeflex
primeflex 是一个非常流行的前端CSS库。同时也是 primevue UI组件库的底层依赖,我们学这个框架,主要是为了给后面的primevue UI组件库打基础。
安装:https://primeflex.org/installation
pnpm install primeflex
src/main.js
import { createApp } from 'vue'import "primeflex/primeflex.css"
import "primeflex/themes/primeone-light.css"import App from './App.vue'createApp(App).mount('#app')
src/App.vue
<template><div class="w-22rem h-22rem bg-blue-300"></div>
</template>