介绍
项目基于 spa 方式实现前后端分离,适合于移动端单页面应用,快速搭建项目原型,项目包含:
- 基础库:
vue.js、vue-router、vuex、axios - 编译/打包工具:
webpack、babel、node-sass、node-less - UI库:
vux - 单元测试工具:
unit、e2e - 本地服务器:
express
git clone https://github.com/rumengkai/vue-spa.git cd vue-spa # install dependencies npm install # serve with hot reload at localhost:8889 npm run dev
# serve with hot reload at localhost:8889 npm run dev # build for production with minification npm run build # build for test with minification npm run build:sit # build for production and view the bundle analyzer report npm run build --report # run unit tests npm run unit # run e2e tests npm run e2e # run all tests npm test
├── 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
整个应用通过 vue 组件的方式搭建起来,通过 vue-router 控制相应组件的展现,组件树结构如下:
app.vue 根组件(整个应用只有一个)
├──view1.vue 页面级组件,放在 views 目录里面,有子组件时,可以建立子目录
│ ├──component1.vue 功能组件,公用的放在 components 目录,否则放在 views 子目录
│ ├──component2.vue
│ └──component3.vue
├──view2.vue
│ ├──component1.vue
│ └──component4.vue
└──view3.vue
├──component5.vue
......
- QQ群:793809641
- vue.js 官网:https://vuejs.org/
- vue.js 中文网: http://vuefe.cn/
- vue-router 文档:http://router.vuejs.org/zh-cn/index.html/
- vux 文档:http://doc.vux.li/
- vuex 文档:http://vuex.vuejs.org/
- webpack 文档:https://webpack.github.io/docs/
- ES2015 入门教程:http://es6.ruanyifeng.com/
- scss 文档:http://sass-lang.com/documentation/file.SASS_REFERENCE.html
- mocha 文档: http://mochajs.org/
- express 中文官网:http://expressjs.com/zh-cn/
For a detailed explanation on how things work, check out the guide and docs for vue-loader.