vue2.0版cnode社区项目搭建及实战开发

初涉vue就深深的被vue强大的功能，快速的开发能力所折服。所以就写了一个cnode社区的app来实践对vue的学习成果。也算是入坑指南吧，如果您觉得对您有帮助，就在github上给个star吧，代码拙劣，大神请忽略。。。

前言

利用cnode中文社区提供的API，一步一步实现vue项目的搭建及开发。
线上地址：https://cnode.applinzi.com
源码地址：https://github.com/sandisen/cnode-vue

技术栈

vue2.0
vue-router2.0
webpack
es6
less
node
npm
git

核心功能

话题列表，话题详情，登录，发布话题，发表评论，点赞点踩，无限加载。。。

项目搭建步骤

一、安装nodejs

下载地址：https://nodejs.org/en/download/
下载完成后，打开git bash命令行（前提是您已经安装了git客户端）进行验证

node -v

npm -v

二、安装淘宝镜像

npm是下载国外的包，大部分人网速都扛不住，所以为了快速安装我推荐使用淘宝镜像cnpm。
1.安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

2.使用
之后所有的npm操作，都替换成cnpm，如cnpm install
这里附上官方文档：https://npm.taobao.org/

三、搭建项目脚手架

1.全局安装vue脚手架 — vue-cli

cnpm install -g vue-cli

2.利用webpack的模板，初始化vue项目

vue init webpack basic-functions（"basic-functions"为自己的项目名称）

3.在本地运行项目

cd basic-functions \'(进入项目文件夹)\'
cnpm install \'(下载依赖包）\'
npm run dev \'(启动项目，一定要在有package.json的当前目录运行)\'

在浏览器地址栏输入:localhost:8080，(8080为端口号，如果被占用，可在webpack.config.js中修改)可以看到以下页面

四、文件结构介绍

--- build \'(webpack配置文件)\'
--- config \'(开发及生产环境配置)\'
--- nodele_modules \'(npm install 现在下来的依赖包)\'
--- src (\'开发目录)\'
    |--- assets \'(资源文件夹-js，vue，img，css等)\'
    |--- router \'(路由文件)\'
        |--- index.js\'(控制路由跳转页面)\'
    |--- App.vue \'(App.vue组件)\'
    |--- main.js \'(预编译入口)\'
--- static \'(静态资源文件)\'
--- .babelrc \'(babel配置文件)\'
--- .gitignore \'(git提交忽略规则\')
--- index.html \'(主页)\'
--- package.json \'(项目配置文件)\'
--- README.md

五、接入less

1.安装依赖

cnpm install less-loader --save-dev
cnpm install node-less --save-dev

2.验证
新建一个less文件，在App.vue的script中引用该less文件。

<script>
    import \'./src/style/base.less\'
</script>

六、接入zepto

1.安装依赖

cnpm install webpack-zepto --save-dev

2.webpack.dev.conf.js配置，在plugins中加入

new webpack.ProvidePlugin({
  $: "webpack-zepto",
  Zepto: "webpack-zepto",
  "window.Zepto": "webpack-zepto"
})

ps：webpack.prod.conf.js中也要配置，保证打包出来的配置正确

3.验证

(./App.vue)
export default {
     mounted:function() {
       console.log($(\'img\').length)
     }
}

七、正式开发

1.修改文件目录结构，为如下目录结构

2.main.js入口文件

import Vue from \'vue\'
import App from \'./App\'
import router from \'./router\'
import $ from \'webpack-zepto\'
import filter from \'./utils/filter.js\';
//注册全局组件
Vue.prototype.$filter = filter;
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: \'#app\',
  router,
  template: \'<App/>\',
  components: { App }
})

3.router文件中index.js文件

import Vue from \'vue\'
import Router from \'vue-router\'

import Index from \'@/page/index\'
import Topic from \'@/page/topic\'
import PublishTopic from \'@/page/publishTopic\'
import Login from \'@/page/login\'
import User from \'@/page/user\'
import Message from \'@/page/message\'
Vue.use(Router)

export default new Router({
  routes: [
    {
	   path: \'/\',
	   redirect: {name: \'index\'}
	 },
    {
      path: \'/\',
      name: \'index\',
      component: Index
    },
    {
      path: \'/topic/:id\',
      name: \'topic\',
      component: Topic
    },
    {
      path: \'/create\',
      name: \'create\',
      component: PublishTopic,
      meta: { requiresAuth: true }
    },
    {
      path: \'/login\',
      name: \'login\',
      component: Login
    },
    {
      path: \'/user/:loginname\',
      name: \'user\',
      component: User
    },
    {
      path: \'/message\',
      name: \'message\',
      component: Message,
      meta: { requiresAuth: true }
    }
  ]
})

页面效果如下：

至此简单的项目已经完成，后续还会加入vuex（状态管理），对于目前使用的html5离线存储进行替换，并且对ajax获取数据进行封装。