vue网站开发结构
之前也简单学习过，把每次的学习记录下来，以便于后续的学习和补充
一、开发工具
web端的开发工具可选择的有很多，比如Visual Studio Code、Webstorm、Intellij IDEA
我选择的是Visual Studio Code，免费，如果开发网站绰绰有余，这个根据个人爱好和使用习惯
Visual Studio Code 下载地址：Visual Studio Code - Code Editing. Redefined
Webstorm 下载地址：WebStorm: The JavaScript and TypeScript IDE, by JetBrains
Intellij IDEA 下载地址：IntelliJ IDEA – the Leading Java and Kotlin IDE
俗话说的好啊，工欲善其事必先利其器，选择一款适合自己的开发工具，事半功倍
二、文件结构
1.node_modules 下载安装的依赖库
2.public 公共资源存放的文件
3.src 核心文件
4..gitignore 上传git的时候可忽略的文件名或者文件类
5.index.html 入口展示的html
6.package.json 安装依赖库的已加密做一些配置的地方
最主要的代码都写在src里面，当然了文件夹的名字看你心情，里面的结构也是写代码进行的结构
三、常用依赖库
（一）基本配置
1.vue 官网：Vue.js - The Progressive JavaScript Framework | Vue.js
就是一门开发前端的开发语言，可以用来开发网站、小程序、甚至app，功能很多，写的每一个页面都是后缀名为.vue的文件
2.vue-router 官网：Introduction | Vue Router
这是我们常说的路由，举个例子你写了一个Home.vue的文件，那你先让别人可以正常看到这个页面，那么怎么办，比如你放在了服务器上后是http：//xxxx/home可以被访问到，但内部的话就是你把你本地的文件Home.vue 让用/home的路径可以访问到，但是随着发展，也有大佬写的依赖可以自动匹配路由
3.vite 官网：Vite | Next Generation Frontend Tooling
前端快速构建项目的工具，快速启动，高速开发
4.pinia 官网：Pinia | The intuitive store for Vue.js
数据装填存储，它允许您跨组件/页面共享状态，提供了跨组件共享数据的方案
（二）辅助配置，按照需要进行安装和使用
1.unplugin-auto-import 自动导入文件
2.postcss-px-to-viewport 自动缩放
3.vite-plugin-vue-layouts 自动布局等
四、代码结构
着重对项目创建以及src里面的需要的内容进行展开
1.我们使用vite进行快速构建我们需要搭建的项目,vite安装可以使用命令行进行，以windows为例，首先检查是否可以使用npm命令，win+r打开搜索，输入cmd打开命令行，输入npm -v 检查是否已经安装，如果出现版本号，证明已经安装完毕，可以继续，如果没有安装，请参考大佬整理好的文章，引用了liyitongxue的文章Node.js安装与配置（详细步骤）_nodejs安装及环境配置-CSDN博客
2.cd 到某一个文件夹，例如
3.执行命令npm init vite-app 项目名
4.按照提示执行后就能启动一个新建的项目
5.用vscode工具打开新建的项目
打开后我们着重介绍src内部的文件
assets components App.vue main.js index.css
assets 存储到本地的图片之类的
components 主要就是存放写的页面
App.vue 显示我们页面的根页面
main.js 程序入口怎么少得了 main
index.css 一些样式得处理
五、适配
适配方式可以用
1. @media (max-width: 700px){} 来通过宽度进行大小屏显示处理
2.postcss-px-to-viewport 使用这个库在vite.config.js中添加
css: {
postcss: {
plugins: [
postcsspxtoviewport({
// 要转化的单位
unitToConvert: 'px',
// UI设计稿的大小
viewportWidth: 1920,
viewportHeight: 1080,
// 转换后的精度
unitPrecision: 6,
// 转换后的单位
viewportUnit: 'vw',
// 字体转换后的单位
fontViewportUnit: 'vw',
// 能转换的属性，*表示所有属性，!border表示border不转
propList: ['*'],
// 指定不转换为视窗单位的类名，
selectorBlackList: ['ignore-'],
// 最小转换的值，小于等于1不转
minPixelValue: 1,
// 是否在媒体查询的css代码中也进行转换，默认false
mediaQuery: false,
// 是否转换后直接更换属性值
replace: true,
// 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
exclude: [],
// 包含那些文件或者特定文件
include: [],
// 是否处理横屏情况
landscape: false
}),
]
}
六、打包
npm run build进行打包，假如打包后的文件无法访问，看看是否在vite.config.js中添加了base:'./'