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文件。

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) } } 七、正式开发

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: 'http://www.cnblogs.com/', redirect: {name: 'index'} }, { path: 'http://www.cnblogs.com/', 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 } } ] })

页面效果如下：