关于vue3知识的重新整合

上次弄得太急，太快了 ，好多基础的东西都又忘了，这次来个全过程。

1. 创建vue3项目：npm create vue;

   创建成功后，npm install安装必要的包，扩展包要单独用npm下载，如

   npm install vite-plugin-vue-setup-extend

   npm install axios（不要忘记下载）

2. 运行vue项目：npm run dev

• node_modules : 项目依赖包文件夹，比如通过 npm install 包名 安装的包都会放在这个目录下；
• public : 公共资源目录，用于存放公共资源，如 favicon.ico 图标等；
• index.html : 首页；
• package.json : 项目描述以及依赖；
• package-lock.json : 版本管理使用的文件；
• README.md : 用于项目描述的 markdown 文档；
• src : 核心文件目录，源码都放在这里面；

进入 src 文件夹，目录如下：

• assets : 静态资源目录，用于存放样式、图片、字体等；
• components: 组件文件夹，通用的组件存放目录；
• App.vue: 主组件，也是页面的入口文件，所有页面都是在 App.vue 下进行路由切换的；
• main.js : 入口 Javascript 文件；

3. 调格式小tips：

   • 窗口框自适应扩展：用flex弹性布局展示，设置最小高度为占满当前页面，当页面因为数据而变长时，会自行往下扩展框

   .app-container {  display: flex;  flex-direction: column;  min-height: 100vh; /* 100vh 代表整个视口（屏幕可见区域）的高度 */ }

   • el好多组件，有官方定义的如align=center来调整

   • 可以用div把组件打包，如

     <div class="btn-container">
     <el-button type="primary" @click="handleCreate">生成陷门</el-button>
     </div>
     <style>
     .btn-container {
       display: flex;
       justify-content: center;
       margin-top: 25px;
     }
     </style>