# kfront-base-vue

> 这个项目是作为vue项目开发的一个公用项目模板
> 这里包括了项目开发所需准备的初步准备工作
> 把开发人员在准备要开始一个项目时，只要从svn上把该项目模板下载到本地
> 然后复制一份并重命名为自己即将要着手对项目名称后，开始页面和逻辑部分的开发即可

## 安装步骤 ##

  // 把模板从svn上下载到本地
  // 复制一份该项目，项目名称对应自己正在开发的项目名
  // 进入新项目目录
  npm install         // 安装项目依赖，等待安装完成之后

## 本地开发 ##

  // 开启服务器，浏览器访问 http://localhost:8080
  // 本地开发时，端口号可从 @/config/index.js中修改
  npm run dev

## 构建生产 ##

  // 执行构建命令，生成的dist文件夹放在服务器下即可访问
  npm run build
  
``` 注
# 国内来说npm会比较慢，有时还需要翻墙，故建议安装国内的淘宝镜像cnpm : 
  npm install -g cnpm --registry=https://registry.npm.taobao.org 
```
  

## 技术栈

vue2 + vuex + vue-router + axios + webpack + ES5/6/7 + scss

```` 注
# 因为有可能会用到ES6/7故node版本建议使用6.0以上
````


## 目录结构
.
├── build                                       // webpack配置文件
├── config                                      // 项目打包路径
├── src                                         // 源码目录
│   ├── assets                                  // 项目所需公共静态资源，如图片，css等
│   │   ├── images                              // 项目公共图片资源
│   │   └── scss                                // 项目公共样式资源
│   │       └── common.scss                     // 公共样式配置文件
│   ├── common                                  // 项目公共js资源
│   │   └── ajax                                // ajax组件
│   │       ├── ajax.js                         // 根据axios封装出来的Ajax
│   │       └── ajax-config.js                  // axios的默认配置项
│   ├── components                              // 组件
│   │   ├── common                              // 公共组件
│   │   │   └── shoplist.vue                    // msite和shop页面的餐馆列表公共组件
│   │   ├── footer
│   │   │   └── footer.vue                      // 底部公共组件
│   │   └── header
│   │       └── header.vue                      // 头部公共组件
│   ├── page
│   │   ├── error
│   │   │   └── error.vue                       // 错误页面
│   │   ├── login
│   │   │   └── login.vue                       // 登录页
│   │   └── home.vue                            // 项目页面总布局
│   ├── router
│   │   └── router.js                           // 路由配置
│   ├── store                                   // vuex的状态管理
│   │   ├── action.js                           // 配置actions
│   │   ├── getters.js                          // 配置getters
│   │   ├── modules                             // store模块
│   │   ├── mutation-types.js                   // 定义常量muations名
│   │   ├── mutations.js                        // 配置mutations
│   │   └── store.js                            // 引用vuex，创建store
│   ├── App.vue                                 // 页面入口文件
│   └── main.js                                 // 程序入口文件，加载各种公共组件
├── static                                      // 项目公共静态资源，如图片等
│   └──images                                   // 项目公共图片资源
├── index.html                                  // 入口html文件
.

``` 注
# assets 和 static 两个公共静态资源管理目录的区别

 asstes: 会被webpack打包的资源，该目录下的资源会被看做`模块`来加载，即将由Webpack解析为模块依赖
         引用该目录下的资源时要用`相对路径`，也可像引入某个模块时使用`import`导入方式
      > 该目录下放的应该是属于该项目的资源文件
         
 static: 该目录结构下的静态资源不会被webpack处理，必须使用`绝对路径`应用该目录下的资源文件
         其下的资源在被直接复制到最终目录(默认是dist/static)下
      > 该目录下放的应该是一些类库文件
```

项目规范

	id：	kfront_id
	class：	kfront-class
	js:		变量 myVar 构造器MyConstructor 函数名 myFun
	文件夹：kfront_dir
	文件:	kfront_file.js
	
	文件后缀名可以省略又不引起歧义的，都省略
	
	import Header from '@/components/header'
	
	es6相关约定
		使用let，不用var
		构造器 class的区别
		let const的区别