指数爆炸's Notes

Appearance

创建 Vue 项目 ​

https://cn.vuejs.org/guide/quick-start.html

npm 工程化 ​

安装前端环境 Node.js ​

  • 官网安装 Node.js【js 的运行时环境】
  • 验证 Node.js 环境变量
    • node -v
  • 配置 npm【node.js 的软件包管理器】的全局安装路径
    • 以管理员身份运行 cmd
    • 运行 npm config set prefix "安装目录" 例如 npm config set prefix "D:\node.js"。【成功不做任何操作】
    • 验证是否设置成功 npm config get prefix【成功则返回 Node.js 安装目录】
  • 切换 npm 的淘宝镜像
    • npm config set registry https://registry.npm.taobao.org【成功不做任何操作】

创建 Vue 项目 ​

  1. 进入打算创建项目的目录，运行 cmd
  2. npm create vue@latest
  3. 选择各种功能
  4. 命名项目名称
  5. cd <your-project-name> 进入项目
  6. npm install
  7. npm run dev /在 VSCode 的 NPM 脚本中点击 dev 启动 Vue 项目

Vue 项目的目录结构 ​

  • node_modules 项目下载的第三方依赖包
  • public 项目的静态文件
  • src 项目的源代码
    • assets 静态资源【图片，字体…】
    • components 可重用组件
    • router 路由配置
    • App.vue 入口页面【根组件】
    • main.js 入口文件
  • .gitignore
  • index.html 默认首页
  • package-lock.json 项目配置文件【项目依赖详细的具体版本】
  • package.json 项目配置文件【基本信息，版本信息，依赖包】
  • vite.config.js vue 的配置文件【端口】

CDN 局部化 ​

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

打包部署 ​

打包 ​

  • 运行 npm 脚本中的 build ![[JavaWeb Draw#^group=2bfxmrHr]]
  • 打包好的文件会出现在 dist 文件夹下

[!hint] 打包好的文件在本地浏览器打开是空白的

  • 解释：

    • 因为浏览器在本地打开文件时，会受到同源策略的限制，导致某些请求被阻止
    • 本地打开时，是使用 file:// 协议打开一个 HTML 文件，而引入依赖资源时，使用的是 http:// 协议，所以违反了同源策略
    • 而在通过服务器（Nginx）访问时，这些请求可以正常处理，因为协议，域名，端口都一致

  • 解决：使用 html-inline：

bash
# 安装 html-inline
npm install -g html-inline

# 这会生成一个 inline-index.html 文件，其中所有的 CSS 和 JavaScript 都内联到 HTML 中
html-inline index.html > inline-index.html

部署 ​

  • 在 nginx 网站 https://nginx.org/en/download.html 下载 nginx 服务器稳定版
  • 将打包好的 dist 下面的内容放置到 html 文件夹中
  • 运行 nginx
    • 默认端口号为 80，如果端口被占用则在 conf 文件夹下的 nginx.conf 中的 listen 80; 处修改端口号
  • 如果在任务管理器中查看到 nginx 启动了，那就表示已经部署成功
  • 在浏览器输入 localhost:端口号 访问

[!hint] Nginx 的安装目录

  • conf 配置文件
  • contrib
  • docs
  • html 静态资源文件【放置打包好的文件】
  • logs 日志文件
  • temp 临时文件