文章目录
1. 概览
├── index.html // 页面入口
├── build // 编译配置文件存储目录
├── config // 项目基本配置文件存储目录
| ├── dev.env.js // 开发环境
| ├── index.js // 主配置文件
| └── prod.env.js // 生产环境
├── node_modules // 项目依赖包存储目录
├── src // 源码存储路径
| ├── App.vue // App 入口
| ├── main.js // 项目配置文件
| ├── api // 接口
| | ├── cnode.js
| ├── components // 自定义组件
| | ├── header.vue
| | └── footer.vue
| ├── config // 配置
| ├── page // 页面
| | ├── index.vue
| | └── content.vue
| ├── router // 路由
| ├── frame // 子路由
| ├── style // scss 样式
| └── utils // 常用工具
└── static // 资源存储目录
├── css // 样式
├── font // 字体
├── img // 图片
├── js // 脚本
└── plugin // 第三方插件
2. *.vue 文件
*.vue
是一个自定义文件类型,用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 <template>
、<script>
和 <style>
,分别代表 html、js、css。
其中,<template>
和 <style>
支持预编译语言。例如,scss 预编译语言,使用 <style lang="scss">
标注。
components/
和 page
都存储的是 *.vue
文件,出于项目管理的需要,二者在功能上各有侧重。component/
侧重于组件,一般由 js 控制组件的显示或者隐藏;page
侧重于页面,往往需要进行路由和跳转。
<template>
中,必须放置一个 html 容器包裹所有代码,一般使用<div>
。
3.
修订记录:
日期 | 版本号 | 作者 | 修订内容 | 备注 |
---|---|---|---|---|
2019-8-5 | 1.0 | moonspirit | 创建文档 |