17611538698
webmaster@21cto.com

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

作者 Admin 分类 资讯 04月17日


_________________________________________________________________________________________

初涉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文件。

<script>
import './src/style/base.less'
</script>

[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: '<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获取数据进行封装。

评论