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

简介: 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 的安装和使用


目录
相关文章
|
17小时前
|
开发工具 git
vite+vue3+ts从0到1搭建企业级项目(4)
vite+vue3+ts从0到1搭建企业级项目
10 0
|
17小时前
|
存储 JavaScript API
vite+vue3+ts从0到1搭建企业级项目(3)
vite+vue3+ts从0到1搭建企业级项目
10 0
|
17小时前
|
资源调度 JavaScript 前端开发
vite+vue3+ts从0到1搭建企业级项目(2)
vite+vue3+ts从0到1搭建企业级项目
9 1
|
19小时前
|
存储 JavaScript API
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
6 2
|
1天前
|
JavaScript
vue知识点
vue知识点
8 3
|
2天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
56 7
使用 Vue CLI 脚手架生成 Vue 项目
|
4天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
8 1
|
4天前
|
JavaScript
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
9 1
|
5天前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统:作业列表
【vue实战项目】通用管理系统:作业列表
19 0
|
5天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
21 2