博客園  首頁(yè)  新隨筆  新文章  聯(lián)系  管理  訂閱 移動(dòng)開發(fā)培訓(xùn),Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),手機(jī)維修培訓(xùn),手機(jī)軟件培訓(xùn)

vue2.0版cnode社區(qū)項(xiàng)目搭建及實(shí)戰(zhàn)開發(fā)


_________________________________________________________________________________________

初涉vue就深深的被vue強(qiáng)大的功能，快速的開發(fā)能力所折服。所以就寫了一個(gè)cnode社區(qū)的app來(lái)實(shí)踐對(duì)vue的學(xué)習(xí)成果。也算是入坑指南吧，如果您覺得對(duì)您有幫助，就在github上給個(gè)star吧，代碼拙劣，大神請(qǐng)忽略。。。

前言

利用cnode中文社區(qū)提供的API，一步一步實(shí)現(xiàn)vue項(xiàng)目的搭建及開發(fā)。
線上地址：https://cnode.applinzi.com
源碼地址：https://github.com/sandisen/cnode-vue

技術(shù)棧

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

核心功能

話題列表，話題詳情，登錄，發(fā)布話題，發(fā)表評(píng)論，點(diǎn)贊點(diǎn)踩，無(wú)限加載。。。

項(xiàng)目搭建步驟

一、安裝nodejs

下載地址：https://nodejs.org/en/download/
下載完成后，打開git bash命令行（前提是您已經(jīng)安裝了git客戶端）進(jìn)行驗(yàn)證

node -v

npm -v

二、安裝淘寶鏡像

npm是下載國(guó)外的包，大部分人網(wǎng)速都扛不住，所以為了快速安裝我推薦使用淘寶鏡像cnpm。
1.安裝cnpm

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

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

三、搭建項(xiàng)目腳手架

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

cnpm install -g vue-cli

2.利用webpack的模板，初始化vue項(xiàng)目

vue init webpack basic-functions（"basic-functions"為自己的項(xiàng)目名稱）


3.在本地運(yùn)行項(xiàng)目

cd basic-functions '(進(jìn)入項(xiàng)目文件夾)'cnpm install '(下載依賴包）'npm run dev '(啟動(dòng)項(xiàng)目，一定要在有package.json的當(dāng)前目錄運(yùn)行)'

在瀏覽器地址欄輸入:localhost:8080，(8080為端口號(hào)，如果被占用，可在webpack.config.js中修改)可以看到以下頁(yè)面

四、文件結(jié)構(gòu)介紹

--- build '(webpack配置文件)'--- config '(開發(fā)及生產(chǎn)環(huán)境配置)'--- nodele_modules '(npm install 現(xiàn)在下來(lái)的依賴包)'--- src ('開發(fā)目錄)'
    |--- assets '(資源文件夾-js，vue，img，css等)'
    |--- router '(路由文件)'
        |--- index.js'(控制路由跳轉(zhuǎn)頁(yè)面)'
    |--- App.vue '(App.vue組件)'
    |--- main.js '(預(yù)編譯入口)'--- static '(靜態(tài)資源文件)'--- .babelrc '(babel配置文件)'--- .gitignore '(git提交忽略規(guī)則')
--- index.html '(主頁(yè))'--- package.json '(項(xiàng)目配置文件)'--- README.md

五、接入less

1.安裝依賴

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

2.驗(yàn)證
新建一個(gè)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中也要配置，保證打包出來(lái)的配置正確

3.驗(yàn)證

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

七、正式開發(fā)

1.修改文件目錄結(jié)構(gòu)，為如下目錄結(jié)構(gòu)

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';//注冊(cè)全局組件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 }
    }
  ]
})

頁(yè)面效果如下：











__________________________________________________________________________
至此簡(jiǎn)單的項(xiàng)目已經(jīng)完成，后續(xù)還會(huì)加入vuex（狀態(tài)管理），對(duì)于目前使用的html5離線存儲(chǔ)進(jìn)行替換，并且對(duì)ajax獲取數(shù)據(jù)進(jìn)行封裝。

http://www.cnblogs.com/yangluoyiBlog/p/6734185.html