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:'./'