Vue3 中后台管理模板搭建（一）：项目初始化

前端

2024-02-04 09:31:57

前言

自Vue3发布尝鲜后，我就一直想在项目中使用它。但是，由于公司硬性兼容要求，我还没有机会使用Vue3。但是，新的风暴已经到来，我不想停滞不前。因此，在休息时间和上班摸鱼时间，我决定搭建一套即开即用的模板，并在这里记录下我的经验。

项目初始化

安装Node.js和Vue CLI

首先，您需要在您的计算机上安装Node.js和Vue CLI。Node.js是JavaScript运行时环境，而Vue CLI是Vue.js的命令行工具，可以帮助您快速创建和管理Vue.js项目。

创建新项目

使用Vue CLI创建新的Vue.js项目：

vue create vue3-admin-template

选择项目功能

在项目创建过程中，您需要选择一些项目功能，例如：

是否使用TypeScript
是否使用Sass
是否使用ESLint和Prettier

安装依赖

项目创建完成后，您需要安装必要的依赖：

npm install

项目结构

项目创建完成后，您会看到以下项目结构：

vue3-admin-template
├── node_modules
├── package.json
├── package-lock.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
└── src
    ├── App.vue
    ├── assets
    │   ├── css
    │   │   ├── main.css
    │   ├── images
    │   │   ├── logo.png
    │   └── fonts
    ├── components
    │   ├── Button.vue
    │   ├── Card.vue
    │   ├── Checkbox.vue
    │   ├── Dialog.vue
    │   ├── Dropdown.vue
    │   ├── Input.vue
    │   ├── List.vue
    │   ├── Menu.vue
    │   ├── Modal.vue
    │   ├── Pagination.vue
    │   ├── Radio.vue
    │   ├── Select.vue
    │   ├── Slider.vue
    │   ├── Switch.vue
    │   ├── Table.vue
    │   ├── Tab.vue
    │   ├── Tag.vue
    │   ├── Textarea.vue
    │   └── Tooltip.vue
    ├── main.js
    ├── router.js
    ├── store.js
    └── views
        ├── About.vue
        ├── Dashboard.vue
        ├── Home.vue
        ├── Login.vue
        ├── Profile.vue
        └── Settings.vue