my-project

A Vue.js project

Development Environment

node

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# 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

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

Directory

├── index.html             入口页面
├── build                构建脚本目录
│   ├──build.js           生产环境构建（编译打包）脚本
│   ├──check-versions.js     版本验证工具
│   ├──utils.js           主要用来处理css类文件的loader
│   ├──vue-loader.conf.js    处理vue中的样式
│   ├── webpack.base.conf.js  webpack基础配置
│   ├── webpack.dev.conf.js   webpack开发环境配置
│   └── webpack.prod.conf.js   webpack生产环境配置
├── config                项目配置
│   ├── dev.env.js         开发环境变量
│   ├── index.js           项目配置文件
│   ├── prod.env.js        生产环境变量
│   └── test.env.js        测试环境变量
├── dist                 打包好的项目
│   ├── html            静态问件
│   ├── conf            nginx配置文件
│   └── 其他            nginx需要的文件 
├── node_modules          项目依赖模块  
├── routes           前端路由
│   └── index.js
├── service         公共请求服务文件，一个页面对应一个请求模块
│   └── A.js                     
│   └── B.js   
├── src               项目源码目录    
│   ├── main.js         入口js文件
│   ├── App.vue         根组件
│   ├── components        公共组件目录
│   ├── assets          资源目录，资源会被wabpack构建
│   │   └── css         第三方css文件，全局css文件
│   │   └── font         字体
│   │   └── less       全局less
│   │   └── images       图片
│   │       └── logo.png  
│   ├── mock            模拟数据                       
├── static                纯静态资源，不会被wabpack构建。
└── test                  测试文件目录（unit&e2e）
    └── unit              单元测试
       ├── index.js       入口脚本
       ├── karma.conf.js    karma配置文件
       └── specs         单测case目录
           └── Hello.spec.js
├── utils             请求文件夹（目前封装了axios，之后会考虑换fetch）
│   └── fetch.js      请求模块
├── view              前端页面文件 
│   └── hello.vue                            
│   └── notfound.vue   
├── vuex             应用级数据（state）
│   └── store.js       分组数据存贮 

Web Stacks

vue、vuex、axios、vue-router等，更多详细可查看项目中的package.json文件

Extends

* srrvice/main.js：
    > 代理请求（支持http,https），编译打包无需置空title变量，直接npm run build即可

* utils:
    > 增加了del、head、put、patch请求

Notes

* cross-env：
    > 解决windows不支持NODE_ENV =development, 来设置环境变量，解决跨平台，兼容问题；NODE_ENV=development，config/dev.env.js已经设置，无需dev命令行重新设置

* vuex-persistedstate：
    > vuex-persistedstate   持久化存储vuex状态层  原理Local Storng

* 支持less：
    > npm install stylus-loader css-loader style-loader less less-loader --save-dev   支持less

* eslint:
    > 增加了代码检测范围
    
* logger插件:
    > 实时监控输出store的 prev state、mutation、next state的状态，方便查看数据源变化