#vue-vueRouter-webpack

vue单页应用基础架构，包含vue-router+vuex+vux+webpack预先解决自己项目可能会遇到的问题，一次新的学习！

##目录结构

│  .gitignore          # 忽略文件,比如 node_modules
│  package.json        # 项目配置
│  README.md           # 项目说明
│  index.html          # 首页
│
├─ webpack.base.config.js         # webpack 基础配置
├─ webpack.dev.config.js          # webpack 开发配置
├─ webpack.prod.config.js         # webpack 生产配置
│
│
├─node_modules
│
├─dist                 # 打包完的文件会自动放在这里
│
└─src
    ├─routers.js       # 启动路由配置
    │
    ├─app.vue          # 入口组件,内含路由和公共部分
    │
    ├─components       # 组件
    │       │
    │       └─ model.vue # 公共组件
    │
    ├─views            # 视图
    │
    ├─vuex             # 组件状态仓库
    │
    ├─routers          # 路由
    │
    ├─directives       # 自定义指令
    │
    ├─filters          # 自定义过滤器
    │
    ├─config           # 放置一些配置文件
    │
    ├─libs             # 放置一些工具函数
    │
    ├─images           # 放置图片
    │
    ├─styles           # 放置css
    │    │
    │    ├─ common.css # 通用css
    │    │
    │    └─ reset.css  # 页面初始化css
    │
    └─fonts            # 放置iconfont字体

##说明 目前已将css(使用@import的和.vue内style的)样式都独立抽离为main.css文件,如果想按需加载,可以将webpack.base.js内的如下代码注释

vue: {
    loaders: {
        css: ExtractTextPlugin.extract(
            "style-loader",
            "css-loader?sourceMap",
            {
                publicPath: "../dist/"
            }
        )
    }
}

new ExtractTextPlugin("[name].css",{ allChunks : true,resolve : ['modules'] }),

##安装

// 注意,需要提前在全局安装webpack和webpack-dev-server,如果已安装请忽略
npm install webpack -g
npm install webpack-dev-server -g

// 安装成功后,再安装依赖
npm install

##运行 ####开发环境

npm run dev

####生产环境(打包)

npm run build

####访问 在浏览器地址栏输入http://127.0.0.1:8080