updata

houcy · Mar 27, 2017 · 4040763 · 4040763
1 parent f1ca0a5
commit 4040763
Show file tree

Hide file tree

Showing 7 changed files with 218 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,76 @@
 
 ### 利用vue2+vuex写一个模仿微信app的单页面应用
+使用FontAwesome字体图标
+
+# 目标功能
+- [ ] 微信 
+- [ ] 通讯录 
+- [ ] 发现 
+- [ ] 我
+- [ ] widows 微信已登录
+- [ ] 搜索页
+- [ ] 对话页、对话功能
+- [ ] 朋友圈
+- [ ] 个人中心
+- [ ] 相册
+- [ ] 收藏
+- [ ] 我的钱包
+- [ ] 设置
+
+
+
+# 项目布局
+```
+|-- build                            // webpack配置文件
+|-- config                           // 项目打包路径
+|-- weixin                           // 上线项目文件，放在服务器即可正常访问
+|
+|-- src                              // 源码目录
+|   |-- components                   // 组件
+|       |-- footer                   // 底部微信导航
+|       |-- header                 	 // 头部公共组件
+|
+|   |-- config                       // 基本配置
+|       |-- env.js                   // 环境切换配置
+|       |-- fetch.js                 // 获取数据
+|       |-- rem.js                   // px转换rem
+|
+|   |-- images                       // 公共图片
+|
+|   |-- frames                        // 页面组件
+|       |-- dialogue                 // 微信首页
+|       |-- addressbook              // 通讯录
+|       |-- find                     // 发现
+|       |-- me                     	 // 我
+|
+|   |-- plugins                      // 引用的插件
+|
+|   |-- router                       // 路由配置
+|
+|   |-- service                      // 数据交互统一调配
+|
+|   |-- store                        // vuex的状态管理
+|       |-- modules                  // 加载各种store模块
+|       |-- action.js                // 配置根actions
+|       |-- getters.js               // 配置根getters
+|       |-- index.js                 // 引用vuex，创建store
+|       |-- mutation-types.js        // 定义常量muations名
+|       |-- mutations.js             // 配置根mutations
+|
+|   |-- style                        // 各种样式文件
+|       |-- public.scss              // 公共样式文件
+|       |-- mixin.scss               // 样式配置文件
+|
+|   |-- App.vue                      // 页面入口文件
+|
+|   |-- main.js                      // 程序入口文件，加载各种公共组件
+|
+|-- .babelrc                         // ES6语法编译配置
+|-- .editorconfig                    // 代码编写规格
+|-- .gitignore                       // 忽略的文件
+|-- favicon.ico                      // 页面左上角小图标
+|-- index.html                       // 入口html文件
+|-- package.json                     // 项目及工具的依赖配置文件
+|-- README.md                        // 说明
+```
+
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "elm",
+  "name": "weixin",
   "version": "1.0.0",
   "description": "vue2-elm",
   "author": "maguohua <[email protected]>",
@@ -14,6 +14,7 @@
     "vuex": "^2.0.0"
   },
   "devDependencies": {
+    "FontAwesome-webpack": "0.0.2",
     "autoprefixer": "^6.4.0",
     "autoprefixer-loader": "^3.2.0",
     "babel-core": "^6.0.0",
@@ -29,6 +30,7 @@
     "express": "^4.13.3",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.9.0",
+    "font-awesome": "4.7.0",
     "function-bind": "^1.0.2",
     "html-webpack-plugin": "^2.8.1",
     "http-proxy-middleware": "^0.17.2",

diff --git a/src/components/footer/foot.vue b/src/components/footer/foot.vue
@@ -0,0 +1,38 @@
+<template>
+	<ul>
+	  	<router-link tag='li' to='dialogue'>微信</router-link>
+	  	<router-link tag='li' to='addressbook'>通讯录</router-link>
+	  	<router-link tag='li' to='find'>发现</router-link>
+	  	<router-link tag='li' to='me'>我</router-link>
+	</ul>
+</template>
+
+<script>
+
+	export default{
+		data(){
+			return{
+				
+			}
+		},
+		created(){
+
+		},
+		mounted(){
+			
+		},
+		components:{
+
+		},
+		computed:{
+
+		},
+		methods:{
+
+		}
+	}
+</script>
+<style lang="scss" scoped>
+
+	
+</style>
diff --git a/src/components/header/head.vue b/src/components/header/head.vue
@@ -0,0 +1,35 @@
+<template>
+	<header>
+		<slot name="title"></slot>
+	</header>	
+</template>
+
+<script>
+
+	export default{
+		data(){
+			return{
+				
+			}
+		},
+		props:["title"],
+		created(){
+
+		},
+		mounted(){
+			
+		},
+		components:{
+
+		},
+		computed:{
+
+		},
+		methods:{
+
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	@import "../../style/public";
+</style>
diff --git a/src/frames/dialogue/dialogue.vue b/src/frames/dialogue/dialogue.vue
@@ -1,14 +1,13 @@
 <template>
-	<ul>
-	  	<router-link tag='li' to='dialogue'>微信</router-link>
-	  	<router-link tag='li' to='addressbook'>通讯录</router-link>
-	  	<router-link tag='li' to='find'>发现</router-link>
-	  	<router-link tag='li' to='me'>我</router-link>
-	</ul>
+	<section>
+		<head-top>
+			<span slot="title">fsdf</span>	
+		</head-top>
+	</section>	
 </template>
 
 <script>
-
+	import headTop from '../../components/header/head'
 	export default{
 		data(){
 			return{
@@ -22,17 +21,18 @@
 			
 		},
 		components:{
-
+			headTop
 		},
 		computed:{
-
+			
 		},
 		methods:{
 
 		}
 	}
 </script>
 <style lang="scss" scoped>
-
+	@import "../../style/public";
+	@import "../../style/font-awesome";
 	
 </style>
diff --git a/src/service/getData.js b/src/service/getData.js
diff --git a/src/style/font-awesome.css b/src/style/font-awesome.css
@@ -0,0 +1,58 @@
+@font-face {
+font-family: 'iconfont';
+src: url('//at.alicdn.com/t/font_1474796923_6082804.eot'); 
+src: url('//at.alicdn.com/t/font_1474796923_6082804.eot?#iefix') format('embedded-opentype'),
+url('//at.alicdn.com/t/font_1474796923_6082804.woff') format('woff'), 
+url('//at.alicdn.com/t/font_1474796923_6082804.ttf') format('truetype'), 
+url('//at.alicdn.com/t/font_1474796923_6082804.svg#iconfont') format('svg'); 
+}
+/*
+* // IE9
+*url('//at.alicdn.com/t/font_1474796923_6082804.eot'); 
+* // IE6-IE8 
+*url('//at.alicdn.com/t/font_1474796923_6082804.eot?#iefix') format('embedded-opentype'), 
+* //chrome、firefox 
+*url('//at.alicdn.com/t/font_1474796923_6082804.woff') format('woff'), 
+* //chrome、firefox、opera、Safari, Android, iOS 4.2+ 
+*url('//at.alicdn.com/t/font_1474796923_6082804.ttf') format('truetype'),  
+* //iOS 4.1- 
+*url('//at.alicdn.com/t/font_1474796923_6082804.svg#iconfont') format('svg'); 
+*
+*/
+.iconfont {
+  font-family:"iconfont" !important;
+  font-size:16px;
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke-width: 0.2px;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+
+.icon-tips-jia::before { content: "\e605"; }
+.icon-return-arrow::before { content: "\e60a"; }
+.icon-tips-add-friend::before { content: "\e606"; }
+.icon-chat-set::before { content: "\e60e"; }
+.icon-mute::before { content: "\e604"; }
+.icon-tips-xiaoxi::before { content: "\e607"; }
+.icon-chat-person::before { content: "\e60c"; }
+.icon-chat-friends::before { content: "\e60c"; }
+.icon-more::before { content: "\e60b"; }
+.icon-tips-saoyisao::before { content: "\e608"; }
+.icon-wechat::before { content: "\e600"; }
+.icon-me::before { content: "\e601"; }
+.icon-dialogue-jia::before { content: "\e615"; }
+.icon-tips-fukuan::before { content: "\e609"; }
+.icon-contact::before { content: "\e610"; }
+.icon-find::before { content: "\e603"; }
+.icon-chat-group::before { content: "\e60d"; }
+.icon-chat-detail-add::before { content: "\e616"; }
+
+.icon-dialogue-voice::before { content: "\e60f"; }
+.icon-dialogue-jianpan::before { content: "\e611"; }
+.icon-dialogue-smile::before { content: "\e612"; }
+.icon-dialogue-bar-jianpan::before{ content: "\e602"; }
+.icon-dialogue-bar-menu::before{ content: "\e613"; }
+.icon-search::before{ content: "\e614"; }
+.icon-iphone-address::before{ content: "\e617"; }
+