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

21CTO

资讯 0 2332 2017-04-17 12:01:03

_________________________________________________________________________________________

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

[h2]前言[/h2]
利用cnode中文社区提供的API，一步一步实现vue项目的搭建及开发。

线上地址：https://cnode.applinzi.com

源码地址：https://github.com/sandisen/cnode-vue

[h2]技术栈[/h2]
vue2.0

vue-router2.0

webpack

es6

less

node

npm

git

[h2]核心功能[/h2]
话题列表，话题详情，登录，发布话题，发表评论，点赞点踩，无限加载。。。

[h2]项目搭建步骤[/h2]
[h3]一、安装nodejs[/h3]
下载地址：https://nodejs.org/en/download/

下载完成后，打开git bash命令行（前提是您已经安装了git客户端）进行验证

node -v

npm -v

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

1.安装cnpm

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

2.使用

之后所有的npm操作，都替换成cnpm，如cnpm install

这里附上官方文档：https://npm.taobao.org/

[h3]三、搭建项目脚手架[/h3]
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中修改)可以看到以下页面

[h3]四、文件结构介绍[/h3]

--- 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

[h3]五、接入less[/h3]
1.安装依赖

cnpm install less-loader --save-dev

cnpm install node-less --save-dev

2.验证

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

&lt;script&gt;

    import './src/style/base.less'

&lt;/script&gt;

[h3]六、接入zepto[/h3]
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)

     }

}

[h3]七、正式开发[/h3]
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: '&lt;App/&gt;',

  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 }

    }

  ]

})