小螺个人博客前台框架搭建（1）_need to install the following packages create-vite

选用技术及框架

vue3+vue-router+axios+vite

搭建框架流程

由于小螺使用了vite，因为现在的vite已经完善，所以小螺就直接使用vite搭建项目了

打开命令面板输入命令
npm init vite
C:\Users\Administrator\Desktop\blogs>npm init vite
 
Need to install the following packages:
  create-vite@4.4.1
Ok to proceed? (y) y             //选择y
√ Project name: ... frontpage    //输入项目名字
√ Select a framework: » Vue      //选择使用框架
√ Select a variant: » JavaScript //选择使用语言
 
Scaffolding project in C:\Users\Administrator\Desktop\blogs\frontpage...
 
Done. Now run:
 
  cd frontpage
  npm install
  npm run dev
  
  进入项目 cd frontpage
  安装相关依赖 
  npm 默认的包管理工具，从国外换取
  yarn 取代npm的包管理工具
  cnmp 又称淘宝镜像工具，将国外的包管理工具，引入国内

安装依赖

vue：Vue 的核心库
npm install vue@next
 
vue-router：Vue 的官方路由库，用于处理页面的导航和路由
npm install vue-router@next
 
vuex：Vue 的官方状态管理库，用于管理应用程序的状态
npm install vuex@next
 
axios（可选）：用于进行 HTTP 请求的库，如果你的项目需要与后端进行通信，可以考虑安装
npm install axios
 
以上是所需要安装的基本依赖，除此外小螺还安装了scss
 
scss（sass）：提高css编写效率，减少代码量
npm install sass sass-loader

框架介绍

your-project/
├── node_modules/          # 依赖模块
├── public/                # 公共资源文件夹
│   ├── favicon.ico        # 网站图标
│   └── index.html         # 主 HTML 模板
├── src/                   # 源代码
│   ├── assets/            # 静态资源（图片、字体等）
│   ├── components/        # 组件
│   ├── router/            # Vue Router 相关文件
│   ├── store/             # Vuex 相关文件
│   ├── styles/            # 全局样式文件
│   ├── views/             # 视图组件
│   ├── App.vue            # 根组件
│   └── main.ts            # 项目入口文件
├── .gitignore             # Git 忽略文件配置
├── package.json           # 项目配置文件
├── README.md              # 项目说明文件
└── vite.config.ts         # Vite 配置文件
 
 
public/：包含了一些不需要经过打包处理的静态资源，例如 index.html 文件和网站的图标等。
 
src/：这是项目的源代码目录，包含了所有的 Vue 组件、路由、状态管理等。具体来说：
     assets/：存放项目中使用的静态资源，如图片、字体等。
     components/：存放项目中的可复用组件。
     router/：包含 Vue Router 相关的配置文件。
     store/：包含 Vuex 相关的文件，用于状态管理。
     styles/：存放全局样式文件，如基础的 SCSS 或 CSS 文件。
     views/：包含项目中的视图组件，通常与路由对应。
     App.vue：是项目的根组件，包含页面布局和全局逻辑。
     main.js：是项目的入口文件，用于初始化 Vue 应用，并加载所需的全局资源。
vite.config.ts：Vite 的配置文件，用于配置构建工具的行为，例如代理、插件等。

 框架图片