_________________________________________________________________________________________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
下載地址:https://nodejs.org/en/download/
下載完成後,打開git bash命令行(前提是您已經安裝了git客戶端)進行驗證webpack
node -v
npm -v
npm是下載國外的包,大部分人網速都扛不住,因此爲了快速安裝我推薦使用淘寶鏡像cnpm。
1.安裝cnpmgit
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.使用
以後全部的npm操做,都替換成cnpm,如cnpm install
這裏附上官方文檔:https://npm.taobao.org/es6
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中修改)能夠看到如下頁面
--- 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
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>
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獲取數據進行封裝。