快速开始

git clone https://github.com/rumengkai/vue-spa.gitcd vue-spa# install dependenciesnpm install# serve with hot reload at localhost:8889npm run dev

命令列表：

# serve with hot reload at localhost:8889npm run dev# build for production with minificationnpm run build# build for test with minificationnpm run build:sit# build for production and view the bundle analyzer reportnpm run build --report# run unit testsnpm run unit# run e2e testsnpm run e2e# run all testsnpmtest

目录结构

├── README.md                       项目介绍├── index.html                      入口页面├── package.json                    npm包配置文件，里面定义了项目的npm脚本，依赖包等信息├── build                           构建脚本目录│   ├── build.js                        运行本地构建服务器，可以访问构建后的页面│   ├── check-version.js                版本检测│   ├── utils.js                        构建相关工具方法│   ├── vue-loader.js                   vue-loader│   ├── webpack.base.conf.js            wabpack基础配置│   ├── webpack.dev.conf.js             wabpack开发环境配置│   └── webpack.prod.conf.js            wabpack生产环境配置├── config                          项目配置│   ├── dev.env.js                      开发环境变量│   ├── index.js                        项目配置文件│   ├── prod.env.js                     生产环境变量│   └── test.env.js                     测试环境变量├── mock                            mock数据目录│   └── hello.js├── src                             源码目录    │   ├── api                             请求接口抽离│   │    └── index.js                  │   ├── assets                          资源目录，这里的资源会被wabpack构建│   │   └── images│   │       └── logo.png│   ├── components                      公共组件目录│   │   └── HelloWorld.vue│   ├── filters                        全局过滤器│   │└── index.js   │   ├── routes                          前端路由│   │   └── index.js│   ├── style                           样式│   │   ├── index.scss│   │   └── theme.scss                  主题│   ├── store                           应用级数据（state）│   │   └── index.js│   ├── utils                           常用工具│   │    ├── assembly.js                    工具│   │    ├── auth.js                        授权相关操作│   │    ├── fetch.js                       异步请求封装（axios）│   │    ├── index.js                       公共js│   │    └── validate.js                    验证js│   ├── views                           页面目录│   │    └── helloworld│   │        └── index.vue│   ├── main.js                         入口js文件│   ├── App.vue                         根组件│   └── vux.js                          vux全局注册组件├── static                          纯静态资源，不会被wabpack构建。└── test                            测试文件目录（unit&e2e）    └── unit                            单元测试        └── specs                           单测case目录            └── Hello.spec.js

组件化

app.vue                         根组件（整个应用只有一个）    ├──view1.vue                    页面级组件，放在 views 目录里面，有子组件时，可以建立子目录    │   ├──component1.vue               功能组件，公用的放在 components 目录，否则放在 views 子目录    │   ├──component2.vue    │   └──component3.vue    ├──view2.vue    │   ├──component1.vue    │   └──component4.vue    └──view3.vue        ├──component5.vue        ……

相关资源

欢迎star，感谢！！！