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 相关文章推荐
prototype class详解
Sep 07 Javascript
jquery isType() 类型判断代码
Feb 14 Javascript
javascript实现日历控件(年月日关闭按钮)
Dec 12 Javascript
JavaScript生成GUID的多种算法小结
Aug 18 Javascript
jquery常用操作小结
Jul 21 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
js实现带农历和八字等信息的日历特效
May 16 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
利用Angularjs和bootstrap实现购物车功能
Aug 31 Javascript
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 Javascript
js动态生成表格(节点操作)
Jan 12 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读取XML值的代码(推荐)
2011/01/01 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
Python发送Email方法实例
2014/08/21 Python
Python数组定义方法
2016/04/13 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
性能服装:HYLETE
2018/08/14 全球购物
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
应用服务器有那些
2012/01/19 面试题
岳父生日宴会答谢词
2014/01/13 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
小学语文教研活动总结
2014/07/01 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
《自己去吧》教学反思
2016/02/16 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android
Vue全局事件总线你了解吗
2022/02/24 Vue.js