Vue2.0+Vux搭建一个完整的移动webApp项目的示例


Posted in Javascript onMarch 19, 2019

1、说明

运用技术:Vue2.0、Vux、vux-loader、vue-cli、vue-router、vuex

2、效果图

Vue2.0+Vux搭建一个完整的移动webApp项目的示例

Vue2.0+Vux搭建一个完整的移动webApp项目的示例

Vue2.0+Vux搭建一个完整的移动webApp项目的示例

Vue2.0+Vux搭建一个完整的移动webApp项目的示例

Vue2.0+Vux搭建一个完整的移动webApp项目的示例

3、实现流程

3.1 搭建框架(需要安装好node.js、npm)

1、快速搭建项目模板

因为项目使用vux,所以推荐使用vux官网的airyland/vux2 模板,vue-cli工具是vue项目的搭建脚手架

npm install vue-cli -g // 如果还没安装  vuw-cli

vue init airyland/vux2 projectName

//注意,如果项目代码没有特别的规范要求,不要启用代码检查,否则会产生很多莫名其妙的报错

//Use ESLint to lint your code? (Y/n) 选择n

 

cd projectName

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

npm run dev

//注意:直接使用cnpm可能会导致依赖不正确。强烈建议给npm设置taobao的registry。

2、运行模板文件

打开本地8080端口可以看到模板运行如下

注意:,如包安装没有报错,npm run dev报错,很可能是8080端口冲突

Vue2.0+Vux搭建一个完整的移动webApp项目的示例

3.2 创建项目文件

项目目录如下

我们只需要将我们的文件放置在src目录下

router文件做路由配置文件,

components放页面相关的.vue和js文件,

assets放项目的图片、css、公共自定义js等

Vue2.0+Vux搭建一个完整的移动webApp项目的示例

3.3 代码说明

main.js文件引入

import Vue from 'vue'
import FastClick from 'fastclick'
import VueRouter from 'vue-router'
import App from './App'
import router from'./router/memberRouter.js'   //---------自定义的路由文件
import Base from './assets/js/baseFun.js'     //---------自定义的公共函数和公共请求方法
import stores from './store/store'        //---------自定义的全局变量
import './assets/css/base.css'          //---------引入的全局公共css
FastClick.attach(document.body)
Vue.config.productionTip = false
//注册全局函数和全局常量
Vue.prototype.baseFun=Base.baseFun; //-----注册到vue的全局,方便各个组件和页面js调用公共函数
Vue.prototype.baseAjax=Base.baseAjax;//-----将封装的ajax请求函数注册到vue的全局 
Vue.use(VueRouter)
var globalVm=new Vue({

  router,      //-----router文件

  el: '#app',

  store:stores,     //-----全局变量

  template: '<App/>',

  components: { App }
})

其他页面上的代码逻辑等请直接参考源码

3.4 其他说明

本项目的请求数据全部为本地的json文件,放在static/basicData里

4 源码路径

github地址:https://github.com/xingxiaoyiyio/vue2-vux-fitness-project 如果觉得不错请记得给个星哟 ^_^

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
jquery中对于批量deferred的处理方法
Jan 22 Javascript
原生js实现轮播图
Feb 27 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
Oct 31 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 Javascript
vue watch自动检测数据变化实时渲染的方法
Jan 16 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
react实现同页面三级跳转路由布局
Sep 26 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
JavaScript工具库MyTools详解
Jan 01 Javascript
Vue项目接入Paypal实现示例详解
Jun 04 Javascript
在vue中使用G2图表的示例代码
Mar 19 #Javascript
Three.js中矩阵和向量的使用教程
Mar 19 #Javascript
vue+iview动态渲染表格详解
Mar 19 #Javascript
浅谈vue加载优化策略
Mar 19 #Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 #Javascript
详解js加减乘除精确计算
Mar 19 #Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 #jQuery
You might like
php调用C代码的实现方法
2014/03/11 PHP
php读取文件内容到数组的方法
2015/03/16 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
yii框架搜索分页modle写法
2016/12/19 PHP
常用PHP封装分页工具类
2017/01/14 PHP
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
Python的Django框架安装全攻略
2015/07/15 Python
Python进阶篇之字典操作总结
2016/11/16 Python
python 网络编程详解及简单实例
2017/04/25 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
同学聚会欢迎辞
2014/01/14 职场文书
护理人员的自我评价分享
2014/03/15 职场文书
团队激励口号
2014/06/06 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
gateway网关接口请求的校验方式
2021/07/15 Java/Android
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python