Vue3-huohuo-admin 初始化项目篇

前端

2023-09-16 09:32:13

Vue3-huohuo-admin 初始化项目篇

作者：技术博客创作专家

2023 年 3 月 7 日

前言

在前面的文章中，我们介绍了 Vue3 和 huohuo-admin 的基本概念和功能。接下来，我们就开始动手创建一个 Vue3-huohuo-admin 项目。

新建项目

安装必要的工具

在开始之前，我们需要安装一些必要的工具：
- Node.js：用于运行 Vue3 项目。
- Vue CLI：用于创建和管理 Vue3 项目。
- huohuo-admin：Vue3 的管理后台框架。
安装完成后，我们就可以开始创建项目了。
创建项目

在终端中，进入到你想要创建项目的目录，然后运行以下命令：
```
vue create my-project
```
这将创建一个名为 my-project 的新 Vue3 项目。
安装 huohuo-admin

进入到 my-project 目录，然后运行以下命令安装 huohuo-admin：
```
npm install huohuo-admin
```
安装完成后，我们就可以开始使用 huohuo-admin 了。

项目结构

创建一个 Vue3-huohuo-admin 项目后，项目目录结构如下：

my-project
├── node_modules
├── package-lock.json
├── package.json
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   ├── router
│   ├── store
│   ├── views
│   └── main.js
├── vue.config.js
└── .gitignore

项目配置

在 package.json 文件中，我们可以看到以下配置：

{
  "name": "my-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.27.2",
    "core-js": "^3.21.0",
    "huohuo-admin": "^2.0.0",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "vue": "^3.2.31",
    "vue-router": "^4.0.12",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/compiler-sfc": "^3.2.31",
    "babel-eslint": "^10.1.0",
    "eslint": "^8.12.0",
    "eslint-plugin-vue": "^9.2.0",
    "vue-template-compiler": "^2.6.14"
  }
}