vue-project-model v1.0.40

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的区别