前端开发框架 Vue 学习第二篇—— 构建项目结构说明

Vue 项目结构
打开我们昨天构建好的myapp 项目，我们会看到如下的目录结构：
前端开发框架 Vue 学习第二篇—— 构建项目结构说明
下面我们分别来说明：

目录	子目录	说明
build		webpack 配置文件
config	index.js	主项目配置
config	…	其他配置
node_modules		node组件
src	assets	静态资源(如图片等) 配置文件（如服务器地址、端口等）
	App.vue	应用主组件，所有页面都是在App.vue下进行切换的。所有的路由也是App.vue的子组件。
	components	UI组件
	router	路由，负责页面跳转
	main.js	应用入口文件，主要作用是初始化vue实例及需要的插件
static		应用静态资源
test		测试文件
.babelrc		babel 配置([babel](https://www.babeljs.cn/) 是Javascript编译器)
.editorconfig		编辑器配置文件
.eslintignore		eslint 忽率规则
.gitignore		gitignore的默认配置
.postcssrc.js		postcss 配置
index.html		应用页面模板
package.json		构建应用脚本和依赖文件
README.md		应用说明文件，MarkDown格式
webpack.config.js		项目入口页面

附官方文档说明：
├── build/ # webpack config files
│ └── …
├── config/
│ ├── index.js # main project config
│ └── …
├── src/
│ ├── main.js # app entry file
│ ├── App.vue # main app component
│ ├── components/ # ui components
│ │ └── …
│ └── assets/ # module assets (processed by webpack)
│ └── …
├── static/ # pure static assets (directly copied)
├── test/
│ └── unit/ # unit tests
│ │ ├── specs/ # test spec files
│ │ ├── eslintrc # config file for eslint with extra settings only for unit tests
│ │ ├── index.js # test build entry file
│ │ ├── jest.conf.js # Config file when using Jest for unit tests
│ │ └── karma.conf.js # test runner config file when using Karma for unit tests
│ │ ├── setup.js # file that runs before Jest runs your unit tests
│ └── e2e/ # e2e tests
│ │ ├── specs/ # test spec files
│ │ ├── custom-assertions/ # custom assertions for e2e tests
│ │ ├── runner.js # test runner script
│ │ └── nightwatch.conf.js # test runner config file
├── .babelrc # babel config
├── .editorconfig # indentation, spaces/tabs and similar settings for your editor
├── .eslintrc.js # eslint config
├── .eslintignore # eslint ignore rules
├── .gitignore # sensible defaults for gitignore
├── .postcssrc.js # postcss config
├── index.html # index.html template
├── package.json # build scripts and dependencies
└── README.md # Default README file

前端开发框架 Vue 学习第二篇—— 构建项目结构说明

相关推荐