前言
如果对 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 的安装和使用