1.0.0

Author: microzz

README.md

@@ -1,16 +1,46 @@
-# vue-cnode
+# Vue.js打造一个开源的CNode社区
 
-> CNode by Vue.js
+Vue.js打造一个开源的CNode社区，实现了浏览、发帖、收藏、回复、点赞、个人中心等等功能。
 
+## 源代码
+源代码地址：👉 https://github.com/microzz/vue-cnode 
 
-## 4.13
-基本功能完成，明天完成登录后的操作。
+欢迎大家star和fork😄
 
-## 4.14
-完成登录以及侧边栏。
+## 预览
+在线预览地址：👉 https://microzz.com:3000/
 
-## 4.15
-增加收藏
+预览：
+
+## 技术栈* **Vue2.0**：前端页面展示。
+* **Vuex**：Vuex，实现不同组件间的状态共享
+* **vue-router**：页面路由切换
+* **axios**：一个基于 `Promise` 的 HTTP 库，向后端发起请求。* **Express**、**Koa2**：因为vue-cli生成的项目是基于**express**的，所以在开发阶段我使用的是它，但是真正上线生产环境我换成了**Koa2**。
+* **Moment.js**：一个时间处理的库，方便对时间进行格式化成需要的格式，如主题、回复时间显示"* 分钟前、* 小时前、*天前"等等。* **ES6**、**ES7**：采用ES6语法，这是以后的趋势。箭头函数、Promise等等语法很好用。
+* **localStorage**：保存用户信息。
+* **Canvas**：页面顶部小雪花效果。* **Webpack**：vue-cli自带Webpack，但是需要自己改造一下，比如要对需要安装sass相关loader，vue-cli已经配置好了webpack，你只需要安装依赖就可以，使用的时候只需要`<style lang="scss"></style>`。
+* **SASS**(**SCSS**)：用SCSS做CSS预处理语言，有些地方很方便，个人很喜欢用。(详看👉[SASS用法指南](https://microzz.com/2017/03/18/sass/))* **flex**：flex弹性布局，**简单**适配手机、PC端。* **CSS3**：CSS3过渡动画及样式。
+
+## 总结1. 组件状态多了用Vuex管理很方便，引用 Redux 的作者 Dan Abramov 的话说就是：
+> Flux 架构就像眼镜：您自会知道什么时候需要它。2. 事先一定要先想好整个页面组成，怎样去分组件开发，这样在开发阶段会事半功倍。
+3. Moment.js在Vue中用ES6的方式引入会有问题，可以尝试在main.js尝试这样`import moment from 'moment'``Vue.prototype.moment = moment;`给Vue的原型上添加moment，这样就可以在Vue的实例中随意使用它了。
+4. 项目结构如下图
+
+
+
+
+
+## 时间轨迹
+* **4.13**：基本功能完成，后续完成登录后的操作。
+
+* **4.14**：完成登录以及侧边栏。
+
+* **4.15**：增加收藏
+
+* **4.16**：加入回复、单条回复、点赞。项目完成。
+
+
+## About源代码地址：👉 [GitHub](https://github.com/microzz/vue-cnode) 个人网站：👉 [microzz.com](https://microzz.com/) GitHub：👉 [microzz](https://github.com/microzz)
 
 ## Build Setup
 
@@ -28,4 +58,6 @@ npm run build
 npm run build --report
 ```
 
-For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
+
+
+

config/index.js

@@ -7,7 +7,7 @@ module.exports = {
     index: path.resolve(__dirname, '../dist/index.html'),
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    assetsPublicPath: './',
     productionSourceMap: true,
     // Gzip off by default as many popular static hosts such as
     // Surge or Netlify already gzip all static assets for you.

index.html

@@ -10,6 +10,6 @@
     <!-- built files will be auto injected -->
 
     <canvas id="star"></canvas>
-    <script src="./static/script/script.js"></script>
+    <script src="http://omratag7g.bkt.clouddn.com/script.js"></script>
   </body>
 </html>

src/App.vue

@@ -23,6 +23,10 @@
       <NewArticle v-if="isShowNewArticle"></NewArticle>
     </transition>
 
+    <transition name="show">
+      <About v-if="isShowAbout"></About>
+    </transition>
+
 
 
   </div>
@@ -36,6 +40,7 @@ import Login from './components/Login/Login.vue';
 import Info from './components/Info/Info.vue';
 import Msg from './components/Msg/Msg.vue';
 import NewArticle from './components/NewArticle/NewArticle.vue';
+import About from './components/About/About.vue';
 
 export default {
   name: 'app',
@@ -46,7 +51,8 @@ export default {
     Login,
     Info,
     Msg,
-    NewArticle
+    NewArticle,
+    About
   },
   computed: {
     isShowLogin() {
@@ -60,7 +66,13 @@ export default {
     },
     isShowNewArticle() {
       return this.$store.state.isShowNewArticle;
+    },
+    isShowAbout() {
+      return this.$store.state.isShowAbout;
     }
+  },
+  beforeCreate() {
+    console.log("%c Powered by Zhaohui - microzz.com","background-image:-webkit-gradient( linear, left top,right top, color-stop(0, #00a419),color-stop(0.15, #f44336), color-stop(0.29, #ff4300),color-stop(0.3, #AA00FF),color-stop(0.4, #8BC34A), color-stop(0.45, #607D8B),color-stop(0.6, #4096EE), color-stop(0.75, #D50000),color-stop(0.9, #4096EE), color-stop(1, #FF1A00));color:transparent;-webkit-background-clip:text;font-size:13px;");
   }
 }
 </script>

src/components/About/About.vue

@@ -0,0 +1,159 @@
+<template lang="html">
+  <transition name="showAbout">
+    <div class="about">
+      <i @click="showAbout" class="close"></i>
+      <div class="about-content">
+        <h1>关于</h1>
+        <h2>Vue.js打造一个开源的CNode社区</h2>
+        <p class="skill"><b>技术栈</b>：</p>
+        <div>Vue2<br>Vuex(不同组件状态共享)<br>vue-router(路由)<br>axios(发起http请求)<br>SASS(SCSS)<br>Express(上线版本是Koa2)<br>Webpack<br>Moment.js(时间处理)<br>ES6<br>localStorage(HTML5)<br>Canvas(页面顶部小雪花)<br>CSS3</div>
+        <p class="url"><b>源码地址</b>：<a @touchstart="isHover=true" @touchEnd="isHover=false" :class="{hover: isHover}" href="https://github.com/microzz/vue-cnode" target="_blank">GitHub</a></p>
+        <p class="url"><b>个人网站</b>：<a @touchstart="isHover=true" @touchEnd="isHover=false" :class="{hover: isHover}" href="https://microzz.com/" target="_blank">microzz</a></p>
+        <p><br>&nbsp;&nbsp;&nbsp;待业码农，求工作～～如果你觉得该项目不错，还可以请我吃辣条😄↓↓↓</p>
+        <div class="help">
+          <img src="./help.png" alt="microzz.com">
+        </div>
+        <p class="copyright"><b>【声明】</b>：本项目仅供学习交流使用，请不要用作任何商业用途。有任何疑问请联系作者↓ <br>📩：<a href="mailto:[email protected]">[email protected]</a></p>
+      </div>
+      <div @click="showAbout" class="mask"></div>
+    </div>
+  </transition>
+
+</template>
+
+<script>
+export default {
+  name: 'about',
+  data() {
+    return {
+      isHover: false
+    }
+  },
+  computed: {
+    isShowAbout() {
+      return this.$store.state.isShowAbout;
+    }
+  },
+  methods: {
+    showAbout() {
+      this.$store.commit('showAbout', false);
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+  a {
+    color: #3F51B5;
+  }
+
+  .about {
+    display: flex;
+    position: absolute;
+    z-index: 2;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    // background-color: rgba(0, 0, 0, .5);
+    .close {
+      position: absolute;
+      z-index: 3;
+      display: inline-block;
+      width: 30px;
+      height: 30px;
+      background: url('./close.svg') no-repeat;
+      background-size: contain;
+      top: 11%;
+      right: 12%;
+    }
+    @media screen and (min-width: 760px) {
+      .close {
+        right: 26%;
+      }
+    }
+    .about-content {
+      position: relative;
+      z-index: 2;
+      width: 80%;
+      height: 80%;
+      background-color: white;
+      border-radius: 10px;
+      padding: 30px 10px;
+      box-shadow: 0 0 20px gray;
+      overflow: auto;
+
+      h1 {
+        text-align: center;
+        font-size: 1.2rem;
+        color: #31c27c;
+        transition: .3s ease-in-out;
+      }
+      h1:hover {
+        transform: rotate(15deg);
+        transition: .3s ease-in-out;
+      }
+      h2 {
+        font-size: 1.1rem;
+        text-align: center;
+      }
+      p {
+        text-indent: 1em;
+        word-break: break-all;
+        margin-top: 6px;
+
+        b {
+          display: inline-block;
+          transition: .3s ease-in-out;
+        }
+        b:hover {
+          transform: rotate(-10deg);
+          transition: .3s ease-in-out;
+        }
+
+      }
+      p.copyright {
+        text-indent: 0;
+      }
+      div {
+        // letter-spacing: 1px;
+        padding-left: 50px;
+      }
+      .help {
+        padding: 0;
+        width: 100%;
+        img {
+          width: 100%;
+          height: auto;
+        }
+      }
+    }
+    @media screen and (min-width: 760px) {
+      .about-content {
+        width: 50%!important;
+      }
+    }
+    .mask {
+      position: absolute;
+      z-index: 0;
+      width: 100%;
+      height: 100%;
+      background: none;
+    }
+  }
+  .showAbout-enter-active {
+    transition: all .4s ease-in-out;
+  }
+  .showAbout-leave-active {
+    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+  }
+  .showAbout-enter, .showAbout-leave-active {
+    transform: rotateZ(180deg);
+    opacity: 0;
+  }
+</style>

src/components/About/close.svg

@@ -5,7 +5,7 @@
 
         <div class="user">
           <div class="user-avatar">
-            <img @click="showLogin" :src="userInfo.avatar_url || '../../../static/images/icon-unlogin.svg'" alt="">
+            <img @click="showLogin" :src="userInfo.avatar_url || 'http://omratag7g.bkt.clouddn.com/icon-unlogin.svg'" alt="">
           </div>
           <div class="username">
             {{userInfo.success ? userInfo.loginname : '点击头像登录'}}
@@ -26,7 +26,7 @@
             <i class="icon-info"></i>个人中心
           </div>
 
-          <div class="about block">
+          <div @click="showAbout" class="about block">
             <i class="icon-about"></i>关于
           </div>
 
@@ -71,6 +71,9 @@ export default {
     },
     showNewArticle() {
       this.$store.commit('showNewArticle', true);
+    },
+    showAbout() {
+      this.$store.commit('showAbout', true);
     }
   }
 }