vue2.0版cnode社區項目搭建及實戰開發


_________________________________________________________________________________________css

初涉vue就深深的被vue強大的功能,快速的開發能力所折服。因此就寫了一個cnode社區的app來實踐對vue的學習成果。也算是入坑指南吧,若是您以爲對您有幫助,就在github上給個star吧,代碼拙劣,大神請忽略。。。html

前言

利用cnode中文社區提供的API,一步一步實現vue項目的搭建及開發。
線上地址:https://cnode.applinzi.com
源碼地址:https://github.com/sandisen/cnode-vuevue

技術棧

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

核心功能

話題列表,話題詳情,登陸,發佈話題,發表評論,點贊點踩,無限加載。。。node

項目搭建步驟

1、安裝nodejs

下載地址:https://nodejs.org/en/download/
下載完成後,打開git bash命令行(前提是您已經安裝了git客戶端)進行驗證webpack

node -v

11.jpg

npm -v

12.jpg

2、安裝淘寶鏡像

npm是下載國外的包,大部分人網速都扛不住,因此爲了快速安裝我推薦使用淘寶鏡像cnpm。
1.安裝cnpmgit

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

2.使用
以後全部的npm操做,都替換成cnpm,如cnpm install
這裏附上官方文檔:https://npm.taobao.org/es6

3、搭建項目腳手架

1.全局安裝vue腳手架 — vue-cligithub

cnpm install -g vue-cli

2.利用webpack的模板,初始化vue項目web

vue init webpack basic-functions("basic-functions"爲本身的項目名稱)


3.在本地運行項目

cd basic-functions '(進入項目文件夾)'
cnpm install '(下載依賴包)'
npm run dev '(啓動項目,必定要在有package.json的當前目錄運行)'

在瀏覽器地址欄輸入:localhost:8080,(8080爲端口號,若是被佔用,可在webpack.config.js中修改)能夠看到如下頁面

4、文件結構介紹

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

5、接入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>

6、接入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)
     }
}

7、正式開發

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獲取數據進行封裝。

相關文章
相關標籤/搜索