vue相关的前端知识回顾

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_cache

npm 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>