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

2024-11-26 14:35:11

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 如果觉得不错请记得给个星哟 ^_^

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue 添加vux的代码讲解

简介 Vux(读音 [v'ju:z],同views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面. 基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式. vux-loader保证了组件按需使用,因此不用担心最终打包了整个vux的组件库代码. vux并不完全依赖于WeUI,但是尽量保持整体UI样式接近WeUI的设计规范.最初目标是创建一个易用,实用,美观的移动端UI组件库,现在离理想状
vue.js整合vux中的上拉加载下拉刷新实例教程

前言 Vux 是基于 Vue 和 Weui 开发的手机端页面 UI 组件库,开发初衷是满足公司的微信端表单需求,因为第三方的调查问卷表单系统在手机上实在比较丑(还是 PC 那一套样式适配了大小而已).于是用 vue 重构了表单组件,后来一发不可收拾把其他常用组件也一并开发了. 相比于 React 还是更喜欢用 Vue ,除了目前社区组件不多,周边构建工具还是比较完善的(作者也特别勤奋). 下面话不多说了,来一看看详细的介绍吧. 先上图创建项目使用vue-cli 创建一个vue项目安装vux
Vue+Vux项目实践完整代码

提供完整的路由,services````````````` ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
在vue中安装使用vux的教程详解

最近因为的工作的原因在弄vue,从后端弄到前端之前一直用js,现在第一次接触vue感觉还挺有意思的,就是自己太菜了,这个脑子呀....不太够用.....页面设计用了一个叫vux的东西,vux可以提供一些组件,用起来还是比较方便的,因为自己比较菜吧,所以有很多东西还是不太深入了解...比如对vux自带样式的修改..希望有大牛看到的话也可以多多指点... 今天就记录一下vux的安装使用吧...... 首先自己要先新建一个vue项目,cmd进入到项目目录下,进行安装 1.在项目目录下安装vux(也可以
详解如何在你的Vue项目配置vux

做移动端项目的话vue现在是首要的选择,足够轻便,文档足够全,当然用的人多,项目中遇到的坑别人可能也遇到过,解决起来也比较方便,至于在开发中做需要的移动端组件库,个人比较推崇vux. 其实项目里组件库可以结合起来使用,因为不管是vux,Mint-ui,Muse-ui等等各有各有的优势,今天就只分享下vue项目中如何配置vux. 1.项目里安装vux npm install vux --save 2.安装vux-loader(vux2必须结合vux-loader使用,本文也只是介绍vux2的配置)
Vue中使用vux的配置详解

Vue中使用vux的配置,分为两种情况: 一.根据vux文档直接安装,无需手动配置 npm install vue-cli -g // 如果还没安装 vue init airyland/vux2 my-project // 创建名为 my-project 的模板 cd my-project // 进入项目 npm install --registry=https://registry.npm.taobao.org // 开始安装 npm run dev // 运行项目二.想在已创建的Vue工程
Vue中使用vux配置代码详解

一.根据vux文档直接安装,无需手动配置 npm install vue-cli -g // 如果还没安装 vue init airyland/vux2 my-project // 创建名为 my-project 的模板 cd my-project // 进入项目 npm install --registry=https://registry.npm.taobao.org // 开始安装 npm run dev // 运行项目二.想在已创建的Vue工程里引入vux组件 <1>. 在项目里安装
vue+vux实现移动端文件上传样式

样式使用的是vux的cell组件如下图的官方demo样子上图的样式需要修改一下,把保护中修改成一个图片并且内嵌一个input type='file' 就可以拥有好看的样式的文件上传了  import { Cell } from 'vux'  <group> <cell title="title" value="value"></cell>
Vue中的Vux配置指南

简介 Vux(读音 [v'ju:z],同views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面. 基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式. vux-loader保证了组件按需使用,因此不用担心最终打包了整个vux的组件库代码. vux并不完全依赖于WeUI,但是尽量保持整体UI样式接近WeUI的设计规范.最初目标是创建一个易用,实用,美观的移动端UI组件库,现在离理想状
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 //注意,如
使用mpvue搭建一个初始小程序及项目配置方法

1. 初始化一个 mpvue 项目现代前端开发框架和环境都是需要 Node.js 的,如果没有的话,请先下载 nodejs 并安装. 然后打开命令行工具: # 1. 先检查下 Node.js 是否安装成功 $ node -v v8.9.0 $ npm -v 5.6.0 # 2. 由于众所周知的原因,可以考虑切换源为 taobao 源 $ npm set registry https://registry.npm.taobao.org/ # 3. 全局安装 vue-cli # 一般是要 sud
webpack5搭建一个简易的react脚手架项目实践

目录项目初始化安装webpack 搭建脚手架目录结构开启本地服务配置css&sass 安装react的相关依赖项目添加热更新生产环境打包总结项目初始化首先我们创建一个目录,初始化 npm,得到一个package.json文件. mkdir react-cli cd react-cli npm init -y 安装webpack 安装webpack和相关依赖.webpack-dev-server是开启开发环境的服务,webpack-merge是合并公共配置文件. npm inst
如何搭建一个完整的Vue3.0+ts的项目步骤

相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0 也已经进入RC阶段(最终产品的候选版本,如果没有问题则可发布成为正式版本).所以Vue3.0的学习是我们必然的趋势,今天,主要分享一下Vue3.0的详细搭建过程,希望可以为初入Vue3的小伙伴有所帮助. 我们现在开始进入今天的主题啦~~ 一.安装 1. 安装nodejs 此处提供nodejs下载地址: https://nodejs.org/zh-cn/download/ 大家根据自己电脑的配置选择适配的 LTS(
Vue2.0脚手架搭建

一.安装node.js 1.进入官网https://nodejs.org/en/download/ 根据电脑操作系统,选择相应版本的文件进行下载. 2.下载文件后双击进行安装安装完成以后进入node.js的安装目录:D:\Program Files\nodejs\(这里是我本机安装的目录,其他机器目录可能不同),你会发现里面自带了npm,直接用npm安装环境即可. 二.安装cnpm 说明:npm(node package manager)是node.js的包管理器,用于node插件管理(包括安
使用vue-cli4.0快速搭建一个项目的方法步骤

前言最近公司的项目终于到了空闲期,而闲不住的我终于把目标放到了项目的迁移上面因为公司的项目比较早的原因(虽然当时vue-cli也出来了一段时间,但是不敢轻易尝试啊!) 所以使用的环境还是 vue2.x 版本的,而又因为公司的前端项目都是我来搭建的原因(并不是技术大佬,入职早!) 所以所有项目开发的时候一直在用的 vue-cli2.0,后来项目多了也没时间就没往 vue-cli3.0 迁移现在终于到了空闲期,可以尝试着慢慢迁移了本篇文章就是主要记录迁移的过程和 vue-cli3.0 的搭建
从0快速搭建一个实用的MVVM框架(超详细)

目录前言基于MVVM进行快速开发,上手即用.(重构已完成,正在编写SampleApp) 如何集成 1.继承BaseApplication 2.创建ViewModel扩展函数 3.引入一键生成代码插件(可选) 框架结构 mvvm Activity封装 Fragment封装 Adapter封装 LiveData封装 Navigation封装 ViewModel封装辅助类封装管理类封装 mvvm_navigation mvvm_network 结合Jetpack,构建快速开发的MVVM框架.
如何搭建一个完整的Java开发环境

作为一个Java程序员,配置一个java开发环境是必备的技能,今天给广大菜鸟初学者补上一课.环境的配置,大概就分三个1,JDK 2,Tomcat(或者其他的)3,eclipse(或者myeclipse).下面我们就一个一个慢慢配置. 配置JDK 编写Java程序需要建立Java开发环境,其中Sun的Java SDK是必不可少的.可以去Sun的官网下载,在此不再赘述.安装好SDK后需要简单配置一下环境变量: 1．右击我的电脑,选择属性(或者按 "Win+Pause Break") 2．选
vue2.0+vue-router构建一个简单的列表页的示例代码

一: 环境搭建使用vue-cli脚手架工具构建安装 vue-cli npm install -g vue-cli 使用vue-cli初始化项目 vue init demo1 进到目录 cd demo1 安装依赖 npm install 开始运行 npm run dev 浏览器访问http://localhost:8080 1.首先会打开首页也就是我们看到的index.html文件 2.使用webpack打包之后默认加载main.js文件并将其引入到index.html文件中二: 开发在
vue2.0在table中实现全选和反选的示例代码

其实在去年小颖已经写过一篇:Vue.js实现checkbox的全选和反选小颖今天在跟着慕课网学习vue的过程中,顺便试试如何在table中实现全选和反选,页面的css样式是直接参考慕课网的样式写的,js是小颖自己写哒,欢迎大家吐槽和点赞,嘻嘻 demo的 git 地址:ShoppingCart 页面效果: 具体怎么实现的呢? 使用localstorage来存储页面信息中已经有写项目是怎么创建的所以小颖在这里就不重复了,其实只是在上篇文章的基础上稍微做了改动: App.vue文件 <temp

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

相关推荐

随机推荐