_________________________________________________________________________________________
初涉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-devcnpm install node-less --save-dev
2.验证
新建一个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中也要配置,保证打包出来的配置正确
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获取数据进行封装。
http://www.cnblogs.com/yangluoyiBlog/p/6734185.html