Vue2.0+Vux搭建一个完整的移动webApp项目的示例
时间:2019-03-19
这篇文章主要介绍了Vue2.0+Vux搭建一个完整的移动webApp项目的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
1、说明
运用技术:Vue2.0、Vux、vux-loader、vue-cli、vue-router、vuex
2、效果图
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端口冲突
3.2 创建项目文件
项目目录如下
我们只需要将我们的文件放置在src目录下
router文件做路由配置文件,
components放页面相关的.vue和js文件,
assets放项目的图片、css、公共自定义js等
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 如果觉得不错请记得给个星哟 ^_^
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- mac上nginx+jetty负载均衡部署一览
- Python标准库(1) — itertools模块
- C++从键盘输入文件结束符
- java cpu高达100%问题 排查
- (43) 剖析TreeMap / 计算机程序的思维逻辑
- Spring Cloud第一篇 Eureka简介及原理
- 华为面试题——约瑟夫问题的C++简单实现(循环链表)
- (49) 剖析LinkedHashMap / 计算机程序的思维逻辑
- Python多进程并行编程实践-mpi4py的使用
- 华为面试题——一道关于指针方面的编程题(C/C++)
- Spring Cloud第二篇 创建一个Eureka Server
- 数据挖掘实战(一):Kaggle竞赛经典案例剖析
- 华为面试题——单向链表倒转(一次遍历)
- Flask一步步搭建web应用
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- SAP CRM数据库表CRMD_CUMULAT_H的设计原理
- Python从入门到大师一百篇教程 | 前言:Python的前世和发展
- Java和ABAP的垃圾回收机制(Garbage Collection)比较
- Java和SAP ABAP的异常处理
- Java的字节码和ABAP load的比较
- matplotlib | Python强大的作图工具,让你从此驾驭图表(一)
- 使用ES6的fetch API读取数据时要注意的一个和cookie相关的坑
- 跟牛老师一起学WEBGIS——WEBGIS基础(地图切片)
- Go语言 | 并发设计中的同步锁与waitgroup用法
- LeetCode 99 | 如何不用递归遍历二叉搜索树?MT方法给你答案
- 以攻击者角度学习某风控设备指纹产品
- 高并发系统三大利器之缓存
- 前端测试题:(解析)js中关于类(class)的继承的说法,下面错误的是?
- 程序员深夜惨遭老婆鄙视,原因竟是CAS原理太简单?| 每一张图都力求精美
- MySQL数据延迟跳动的问题分析