Vue3+Vite+Pinia+Naive后台管理系统搭建之一：基础项目构建

 前言

如果对 vue3 的语法不熟悉的，可以移步 Vue3.0 基础入门，快速入门。

github 开源库：Vue3-Vite-Pinia-Naive-Js

gitee   开源库：Vue3-Vite-Pinia-Naive-Js

1. 构建项目

// 创建项目
yarn create vite
// or
npm create vite

​编辑

// 安装默认依赖
yarn install
// or
npm install

// 运行项目
yarn dev
// or
npm run dev

​编辑

2. 重置项目

// 新增 src/api 文件夹：存放 axios 封装接口

// 新增 src/assets/imgs 文件夹：存放静态图片
// 新增 src/assets/style 文件夹：存放公用scss、工具scss
// 新增 src/assets/svg 文件夹：存放自定义组件 Icon 的文件

// 清空 src/components 文件夹：存放自定义共用组件

// 新增 src/pages 文件夹：存放页面 .vue文件

// 新增 src/router 文件夹：存放路由

// 新增 src/store 文件夹：存放共用状态

// 新增 src/utils 文件夹：存放工具.js方法

// 删除 src/style.css 文件

​编辑

3. 编辑 src/main.js 

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

4. 编辑 src/App.vue

<script setup></script>

<template>
  <div class="demo">demo</div>
</template>

<style scoped></style>

​编辑

综上

我们的项目基础就搭建好了。下一章：Vue3+Vite+Pinia+Naive项目搭建之二：scss 的安装和使用