第四章项目环境配置（一）——项目初始化

qdbest

已于 2024-08-05 06:53:05 修改

阅读量90

点赞数 6

分类专栏： Vue3项目实战-后台管理系统文章标签： vue.js node.js typescript

于 2024-08-05 06:06:07 首次发布

本文链接：https://blog.csdn.net/qdbest/article/details/140916436

版权

Vue3项目实战-后台管理系统专栏收录该内容

6 篇文章 0 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

第四章项目环境配置

4.1 项目初始化

4.1.1 新建项目

Vite 官网

运行命令

npm create vite@latest

如果在 Windows 上直接通过 Git Bash 启动这个命令，交互提示符并不工作，必须通过 winpty npm.cmd create vite@latest 启动这个命令。而在 Visual Studio Code 终端下运行则没问题。

当前的package.json文件如下：

{
  "name": "glc-admin",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
     "dev": "vite",
     "build": "vue-tsc && vite build",
     "preview": "vite preview"
  },
  "dependencies": {
     "vue": "^3.3.11"
  },
  "devDependencies": {
     "@vitejs/plugin-vue": "^4.5.2",
     "typescript": "^5.2.2",
     "vite": "^5.0.8",
     "vue-tsc": "^1.8.25"
  }
}

第三行"private": true表明项目默认启用 ES6 模式，参阅阮一峰的Node.js 如何处理 ES6 模块

配置 .nmvrc

使用 .nvmrc 文件管理项目中的 Node 版本有以下好处：
- 保证多人开发环境的一致性
  
  在多人协作的开发环境中，每个人可能安装的 Node 版本都不一样。使用 .nvmrc 文件可以保证每个人都使用同样的 Node 版本，这样可以避免因为 Node 版本不一致导致的问题。
- 支持多个项目并存使用不同的 Node 版本
  
  在一个开发人员的计算机上，可能存在多个应用程序，每个应用都需要使用不同的 Node 版本。使用 .nvmrc 文件可以方便地管理，并使得不同的应用程序共存于同一个计算机中。
- 简单方便
  
  使用 .nvmrc 文件非常方便，只需要将它放置在项目根目录下，运行 nvm use 即可。也可以安装插件，终端启动时自动运行 nvm use 切换 Node 版本。
```
cd yc-admin
echo "v21.5.0" > .nvmrc
```
支持模糊版本号，如 21，会切换到大版本 21 的最后一个版本。

升级到最新版本

按照官网升级日志将 Vue 升级到 3.4.5 版本。

{
  "name": "glc-admin",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
     "dev": "vite",
     "build": "vue-tsc && vite build",
     "preview": "vite preview"
  },
  "dependencies": {
     "vue": "^3.4.5"
  },
  "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.0",
     "typescript": "^5.2.2",
     "vite": "^5.0.8",
     "vue-tsc": "^1.8.27"
  }
}

安装依赖并运行程序

4.1.2 删除和修改项目文件

删除 src/assets 目录下的所有文件
删除 src/components 目录下的所有文件
删除 src/style.css

删除 main.ts 文件的 import './style.css'

import { createApp } from "vue";
import App from "./App.vue";

createApp(App).use(router).use(pinia).mount("#app");

修改 App.vue，只保留三大顶级元素。

<script setup lang="ts"></script>

<template>
  <div>hello</div>
</template>

<style scoped></style>

4.1.3 更改标题

找到 index.html 页面，修改 <title> 标签体内容： <title>果粒橙-Vue3全家桶项目实战</title>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>果粒橙-后台管理系统</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

4.1.4 更改ICO图标

复制图标文件 /03-配套资料/favicon.ico 粘贴到 public 目录下, 替换原有的图标。然后清除浏览器的缓存。

注意：要选时间不限，将所有缓存清除

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

qdbest

关注

6
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第四章项目环境配置（一）——项目初始化

运行命令如果在Windows上直接通过Git Bash启动这个命令，交互提示符并不工作，必须通过启动这个命令。而在终端下运行则没问题。当前的第三行表明项目默认启用ES6模式，参阅阮一峰的配置.nmvrc使用.nvmrc文件管理项目中的Node版本有以下好处：保证多人开发环境的一致性在多人协作的开发环境中，每个人可能安装的Node版本都不一样。使用.nvmrc文件可以保证每个人都使用同样的Node版本，这样可以避免因为Node版本不一致导致的问题。支持多个项目并存使用不同的Node版本。
复制链接

扫一扫