Awesome Open Source
Awesome Open Source

vue单页面应用

介绍

项目基于 spa 方式实现前后端分离,适合于移动端单页面应用,快速搭建项目原型,项目包含:

  • 基础库: vue.jsvue-routervuexaxios
  • 编译/打包工具:webpackbabelnode-sassnode-less
  • UI库:vux
  • 单元测试工具:unite2e
  • 本地服务器: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
        ……

相关资源

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

欢迎star,感谢!!!


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,535,723
Vue (83,121
Webpack (9,740
Sass (6,234
Axios (3,555
Vuex (3,165
Vue Router (2,197
Less (1,861
Spa (1,589
Vux (75
Vue Spa (30
Related Projects