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

Vue 项目结构
打开我们昨天构建好的myapp 项目,我们会看到如下的目录结构:
这里写图片描述
下面我们分别来说明:

目录子目录说明
buildwebpack 配置文件
configindex.js主项目配置
其他配置
node_modulesnode组件
srcassets
  • 静态资源(如图片等)
  • 配置文件(如服务器地址、端口等)
App.vue
  • 应用主组件,所有页面都是在App.vue下进行切换的。
  • 所有的路由也是App.vue的子组件。
components
  • UI组件
router路由,负责页面跳转
main.js应用入口文件,主要作用是初始化vue实例及需要的插件
static应用静态资源
test测试文件
.babelrc babel 配置([babel](https://www.babeljs.cn/) 是Javascript编译器)
.editorconfig编辑器配置文件
.eslintignoreeslint 忽率规则
.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

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值