.vue文件结构解析

Posted 2023-03-23

参考技术A 关于单文件组件
vue 的单文件相当于一个页面中的 组件 ，包含了关于该组件的 html-css-js 文件集合，
这么做的目的有利于项目的管理和整合，官方说法是有 构建步骤 。
在 <template/> 标签下只能有一个子节点元素，如果写多个如 <div/> 这样的标签则会报错，
如下所示:

.vue文 件可包含 html-css-js ，webpack自动打包成三个文件？
在.vue文件中，dom结构可以写在<template/>标签下，
而针对该 dom 结构的样式文件则作为 <template/> 标签的 兄弟 元素 <style/> 存在，
同样的控制该 dom 结构的脚本程序写在另一个兄弟元素 <script/> 之中，

这样一来，每个组件自己对应的结构样式都在同一个文件之中，
便不会与其它的组件搞混了。

vue-cli目录结构解析

vue-cli项目目录结构

• dist (由"npm run build"打包后生成,真正挂载到服务器的前端所有代码)

• node_modules (第三方包目录,安装第三方包时生成)

• public (公共资源目录)

  • static (静态资源)
    • img (图片)
  • XX.jpg (jpg图片)
  • XX.png (png图片)
  • index.html (首页文件)

• src (源文件目录)

  • assets (资源库)

    • icons (图像)
    • lightbox (灯箱)
    • overlays (叠加层)
    • photos (相片)
    • svg (矢量图形库)
    • user_image (用户图片)
    • XX.jpg (jpg图片)
    • XX.png (png图片)

  • components (组件库)

    • XX.vue (vue组件)

  • router (路由表)

    • index.js (路由入口)

  • views (视图库)

    • XX.vue (页面组件)

  • .eslintrc.js ()

  • App.vue (入口组件)

  • data.js (数据)

  • http.js (超文本传输协定)

  • location.js (定位)

  • main.css (主要样式)

  • main.js (主脚本)

  • request.js (请求)

  • store.js (储存)

• .gitignore (git忽略文件名单)

• babel.config.js (其它语言配置)

• eslintrc.js-disabled (eslint代码规范)

• menu.json (菜单)

• package-lock.json ("npm init"生成,记录项目所依赖包的名称及版本,锁版本)

• package.json ("npm init"生成,记录项目所依赖包的名称及版本,不锁版本)

• README.en.md (本项目说明)

• README.md (本项目说明)

• vue.config.js (vue配置)

• webstorm.config.js (网风暴配置)

@沉木