npm 安装与网站部署

一、npm 安装与配置

首先去官网下载安装包：
https://nodejs.org/zh-cn

注：尽量下载 LTS 版本，长期提供维护支持。

安装完成后通过以下命令查看是否安装成功：

npm -v
node -v

由于中央仓库在国外，因此我们可以通过设置国内镜像源的方式加速依赖库的下载：

npm config get registry https://registry.npmmirror.com

二、新建一个 vue 项目

接下来我们创建一个文件夹 vsworkspace 用来存放项目文件，在命令行中切换到该目录，输入以下命令创建一个 vue 项目：

npm create vue@latest

输入项目名称 vue-project 并选择包含功能 TypeScript、ESLint（错误预防）：

接下来通过以下命令编译运行项目：

# 切换到项目根目录
cd vue-project

# 安装项目依赖项
npm install

# 编译并运行项目
npm run dev

编译完项目后，在控制台输入 o 命令，会调用系统默认浏览器打开 http://localhost:5173：

打开后的界面如下：

后面我们会通过集成开发环境 vscode 来进行前端开发，因此我们打开 vscode，查看是否安装了 ESLint 和 Vue - Official 这两个插件，如果没有安装则安装一下：

接下来我们将项目根目录 vue-project 拖入 vscode 中并来看看一个 vue 项目的文件结构：

主要有如下文件：
.vscode：vscode 编辑器的缓存文件，不用修改
node_modules：在 npm install 命令执行之前这个目录是不存在的，这里面安装了很多的依赖项（这个文件可以删除来清除缓存，重新用命令下载）
public：存放一些静态资源（如网站角标、图片、视频等）
src：存放源码（如 .vue、ts等）
main.ts：用来引入 App.vue 等组件和页面
APP.vue：一个页面或组件，包括三个必要部分：script（js/ts）、template（html）、style（css）
index.html：整个应用访问的入口
package.json：里面包括 dependencies 和 scripts 两个部分。dependencies 是当前项目的依赖项，而 scripts 是整个项目启动的脚本 （npm run dev 中的 dev 对应的就是 scripts 脚本）
tsconfig.json 和 vite.config.ts：如果不是对整个项目进行深度定制的话可以不用动

注：一个典型的 Vue 项目，都是在 index.html 这一个单页面里形成各种交互，这也就是所谓的 SPA（Single Page Application）。Vue3 的核心是通过 createApp 函数创建一个应用实例，在这个实例中构建个各种应用（main.ts 中）。每个 vue 文件就是一个页面上的组件，组件可以嵌套使用。

三、部署网站到宝塔

我们完成 vue 项目编写后，通过以下命令对该项目进行打包：

npm run build

执行完成后会在项目根目录生成 dist 文件夹，该文件夹即打包后的网站源码，接下来我们需要将其部署到宝塔中，我们打开宝塔控制台，添加站点：

注：由于此时我们还没有申请域名，因此这里暂时先填写服务器 ip。

点击提交后会出现成功提示页面：

接下来我们点击设置：

在伪静态里面填入下面代码并保存：

location / {
  if (!-e $request_filename) {
    rewrite  ^(.*)$ /index.html?s=/$1  last;
    break;
  }
}

接下来我们打开新建网站的根目录：

将生成的网站源码 dist 文件夹传进来：

继续进入设置界面，将网站目录设置为刚刚传进来的 dist 文件夹并保存：

配置完成后我们通过服务器ip:端口的地址形式来访问我们暴露在公网上的网页：