Ubuntu 22.04 配置Vue开发环境

2023-12-07 by dongnan

环境描述

操作系統

# 命令
head -n4 /etc/os-release

# 输出
PRETTY_NAME="Ubuntu 22.04.1 LTS"
NAME="Ubuntu"
VERSION_ID="22.04"
VERSION="22.04.1 LTS (Jammy Jellyfish)"

Node与NPM

使用 TLS 版本

当前 TLS 版本为 Node 20.10.x ，支持 Ubuntu 22.04 操作系统。

导入 GPG 密钥

sudo apt-get update
sudo apt-get install -y ca-certificates curl gnupg
sudo mkdir -p /etc/apt/keyrings
curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg

创建 source.list 文件

NODE_MAJOR=20
echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list

安装 NodeJs

sudo apt-get update
sudo apt-get install nodejs -y

查看版本

# nodejs
node -v
v20.10.0

# npm
npm -v
10.2.3

CNPM

GWF，在国内推荐使用淘宝NPM镜像站：

sudo npm install -g cnpm --registry=https://registry.npmmirror.com

# cnpm 版本
cnpm -v | head -n1

# 输出
cnpm@9.2.0 (/usr/lib/node_modules/cnpm/lib/parse_argv.js)

创建vue项目

初始化项目

# 该指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。
npm init vue@latest

Vue.js - The Progressive JavaScript Framework

✔ Project name: … practice      # 这里输入项目名称
✔ Add TypeScript? … No / Yes    # 不需要开启某个功能，可以直接按下回车键选择 No
✔ 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

Scaffolding project in /home/dongnan/vue/demo/practice...

Done. Now run:

  cd practice
  npm install
  npm run dev

提示，执行以上3条命令。

项目目录

cd practice/

tree ./ -L 1
./
├── index.html
├── jsconfig.json
├── package.json
├── public
├── README.md
├── src
└── vite.config.js

2 directories, 5 files

package.json ：Nodejs 项目的配置文件，其中包含了项目的元数据和依赖信息。
src ：src 目录是主要工作目录，包含了整个应用程序的源代码。
jsconfig.json ：用于配置 JavaScript 项目的一些设置，还可配合 vscode 进行设置。
vite.config.js ：在 Vue 3 项目中，使用 Vite 作为构建工具， vite.config.js 文件来配置 Vite。

安装相关依赖包

cnpm install

# 输出
✔ Linked 25 latest versions fallback to /home/省略../node_modules/.store/node_modules
✔ Linked 1 public hoist packages to /home/省略../node_modules
Recently updated (since 2023-11-27): 3 packages (detail see file /home/省略../node_modules/.recently_updates.txt)
省略..
✔ Run 1 script(s) in 33ms.
✔ Installed 3 packages on /home/省略../practice
✔ All packages installed (25 packages installed from npm registry, 省略...etag hit 45 / miss 2)

启动开发服务器

npm run dev

# 输出
> practice@0.0.0 dev
> vite

  VITE v4.5.0  ready in 172 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

访问开发服务器

使用浏览器访问上述的地址，这里curl 命令展示：

curl -IL http://localhost:5173/

# 输出
HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Content-Type: text/html
Cache-Control: no-cache
Etag: W/"184-K7/CrKE/bmuoAkXTWFCk1NMrFnI"
Date: Mon, 04 Dec 2023 06:59:20 GMT
Connection: keep-alive
Keep-Alive: timeout=5

vscode

vscode 是 Visual Studio Code 简称，是微软公司推出的一个轻量但功能强大的IDE编辑器，支持 Linux 等主流操作系统，扩展组件非常丰富，例如 python golang javascript vue 等。

DEB安装包

下载 Debain/Ubuntu DEB安装包：

wget -c https://az764295.vo.msecnd.net/stable/1a5daa3a0231a0fbba4f14db7ec463cf99d7768e/code_1.84.2-1699528352_amd64.deb

安装插件

这里选择两个插件：

Chinese (Simplified) 简体中文插件。
Vue Language Features (volar) 插件。

常用快捷键

下面是一些常用的快捷键，可以高效的使用 VsCode ：

选中一个词
ctrl + d

搜索   
ctrl + f

替换   
ctrl + h

在项目内搜索   
ctrl + shift + f

打开或关闭终端
通过Ctrl + `

打开新的编辑器窗口
Ctrl+Shift+N

关闭编辑器
Ctrl+Shift+W

添加关闭行注释
Ctrl + /

块区域注释 
Shift + Alt +A

跳转到页头
Ctrl + Home

跳转到页尾
Ctrl + End

折叠区域代码
Ctrl + Shift + [

展开区域代码
Ctrl + Shift + ]