ksc-vue-console

#vue console
> 目标：快速初始化一个vue工程

##目录结构

│  .gitignore          # 忽略文件,比如 node_modules
│  package.json        # 项目配置
│  README.md           # 项目说明
│  index.html          # 首页
│
├─console.base.config.js         # 基础
├─console.dev.config.js          # 开发
├─console.build.config.js        # 编译
│
├─node_modules
│
├─dist                 # 打包完的文件会自动放在这里
│
└─src
    ├─ main.js         # 启动配置
    │
    ├─ router.js       # 路由配置
    │
    ├─components       # 组件
    │       │
    │       └─ app.vue # 入口组件,内含路由和公共部分
    │
    ├─views            # 视图(即路由)
    │
    ├─directives       # 自定义指令
    │
    ├─filters          # 自定义过滤器
    │
    ├─config           # 放置一些配置文件
    │
    ├─libs             # 放置一些工具函数
    │
    ├─images           # 放置图片
    │
    ├─styles           # 放置css
    │    │
    │    ├─ common.css # 通用css
    │    │
    │    └─ reset.css  # 页面初始化css
    │
    ├─fonts            # 放置iconfont字体
    │
    └─template         # html模板
         │
         └─ index.ejs # 默认的html模板

##说明
将css(使用@import的和.vue内style的)样式都独立抽离为main.css文件,如果想按需加载,可以将webpack.base.js内的如下代码注释
``javascript
vue: {
loaders: {
css: ExtractTextPlugin.extract(
"style-loader",
"css-loader?sourceMap",
{
publicPath: "../dist/"
}
)
}
}

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

#如何使用

##说明
> html模板文件在src/template/index.ejs内。

##安装
`
// 安装前请先确保已安装node和yarn
yarn的安装方法:

Windows:
需要下载msi文件 ，下载地址：https://yarnpkg.com/latest.msi

macOS:
curl -o- -L https://yarnpkg.com/install.sh | bash

Linux:
sudo apt-key adv --keyserver pgp.mit.edu --recv D101F7899D41F3C3 echo "deb http://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn

// 需要提前在全局安装webpack和webpack-dev-server,如果已安装请忽略
yarn add global webpack
yarn add global webpack-dev-server

// 安装成功后,再安装依赖
yarn install
`

##运行
####开发环境
`
// 注意首次使用需要执行下面的init命令来生成入口html文件,以后不用再执行
yarn run init
yarn dev
`

####生产环境(打包)
`
yarn build
``

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