Vue.js开发移动端APP

最新推荐文章于 2025-07-29 18:01:38 发布

转载

最新推荐文章于 2025-07-29 18:01:38 发布 · 2.8k 阅读

14 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5ad69f6d6fb9a028c42eb7dd

文章标签：

#javascript #webpack #json #ViewUI

本文是作者从AngularJS转向Vue.js的学习心得，涵盖了使用Vue-cli搭建项目，vue-router管理路由，vue-resource进行Ajax通信，vuex状态管理，移动端开发技巧如flex布局，Vue.js生命周期，dependencies与devDependencies的区别，以及Vue.js中使用sass和less等插件的实践总结。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前一直用AngularJS进行开发，最近打算系统学习Vue.js。下面主要是我学习过程中心得的总结和遇到的技术难点：

第一部分：技术准备

Vue-cli 搭建基本项目结构

vue-router 实现路由管理

vue-resource 实现ajax通信

1.Vue-cli 脚手架搭建基本代码框架

1.vue.js 2.x 版本脚手架中没有dev-server.js 如何进行数据模拟点这里 2.新建项目

vue init webpack vuetest(vuetest为项目名称)
复制代码

3.安装依赖

安装sass:
cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev

安装vuex:
cnpm install vuex --save
复制代码

2.vue-router 官方插件管理路由官方地址点这里

3.vue-resource Ajax通信官方地址点这里

1、安装依赖包
cnpm install vue-resource --save
2、进行ajax请求
{
  // GET /someUrl
  this.$http.get('/someUrl').then(response => {

    // get body data
    this.someData = response.body;

  }, response => {
    // error callback
  });
}
复制代码

4.vuex 状态管理

mapState mapActions

第二部分：移动端常用的开发技巧

flex弹性布局
css stickyfooter

1 技巧

1.1 手机可以查看PC端的页面内容（必须保证手机和电脑在同一个局域网下）

1、localhost:8080/#/goods 改成 http://192.168.0.79:8080/#/goods
2、在 https://cli.im/text?c4a9982bce94d4d7e34217b287da6599 将http://192.168.0.79:8080/#/goods 生成二维码 ，通过手机扫描二维码即可看到页面。
复制代码

1.2 iconfont 和 icomoon

1.3 sticky footer(兼容性最好的一种方法)

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Sticky footer</title>
		<link rel="stylesheet" href="css/icon.css" />
		<style type="text/css">
			.clearfix {
				display: inline-block;
			}
			
			.clearfix:after {
				d