从零开始搭建vue移动端项目

一、Vue项目搭建
二、使用步骤
- 1.初始化
- 2.路由
- 3.Vuex（状态管理）
- 4.Axios（数据请求模块）
- 5.使用Less
- 6.移动端适配
- 7.注意事项
- 8.移动端页面切换动画
- 9.Ui框架
- 10.打包
- 11.其他

一、Vue是什么？

Vue 是一套用于构建用户界面的渐进式框架。

二、使用步骤

1.初始化

1）安装node.js

2）使用npm全局安装webpack npm install webpack -g

3）全局安装vue-cli npm install --global vue-cli

4）安装脚手架 npm install --g vue-cli

5）在目标文件夹目录创建项目 vue init webpack myproject(项目目录名称)

6）注意:

(1)Install vue-router? Yes

(2)Use ESLint to lint your code? Yes

(3)Set Up Unit tests No

(4)Setup e2e tests with Nightwatch? No

(5)Yes,use NPM

7）搭建目录结构

build webpack项目配置文件

config 项目配置目录，运行环境，端口之类的

dist npm run build输出目录

node_modules 项目依赖包

src 项目主要文件存放目录

api 请求模块

common-api.js 定义公共请求

home-api.js 定义模块请求

apiconfig 请求封装

index.js

assets 项目静态文件存放目录(会经过webpack处理,图片之类的静态资源)

components 公共组件

tabbar.vue tabbar底部导航

pages 主逻辑组件页面

home.vue 主页

router 路由配置

index.js

store vuex状态管理

modules 各个模块的状态

home.js

index.js 统一输出各个模块状态

mutation-type.js 定义改变状态的方法

styles 统一样式

base.less 全局css的字体型号

index.less 样式统一入口

mixin.less 基准字体大小及算法

reset.less 重置默认样式

variable.less 定义主题颜色等基本样式

App.vue 统一入口组件

main.js 入口js文件

static 静态文件存放目录(不会受到webpack的影响,第三方的静态资源库)

2.路由（vue-router）

1）搭建时已安装router

2）配置router router/index.js

import Vue  from 'vue'import Router  from 'vue-router'Vue.use(Router)//"@"相当于".."export default new Router({  routes: [{     path: '/',     name:'Home',//首页     component:(resolve) =>require(['@/pages/Home'], resolve)     },{
     path:'/User',name: 'User',//我的component: (resolve) =>require(['@/pages/User'], resolve)}] })

3)使用路由跳转

this.$router.push('/Home')
this.$router.go('/Home')
this.$router.replace('/Home')

3.Vuex（状态管理）

1)安装vuex npm install vuex --save

2)引入vuex main.js

import Vue from 'vue'

import App from './App'

import router from './router'

import Vuex from 'vuex'

import store from './store'

Vue.config.productionTip = false

Vue.use(Vuex)

/* eslint-disable no-new */

new Vue({

el: '#app',

router,

store,

components: { App },

template: '<App/>'

})

3)配置使用vuex

(1)在store/index.js–>vuex的入口文件配置vuex

import Vue from 'vue'
import Vuex from 'vuex'//引入vuex
import home from './modules/home'//引入home 模块代码
import getters from './getters'//规范变量的文件
Vue.use(Vuex); //使用 vuex

const store = new Vuex.Store({//创建vuex中的store对象
getters,
modules:{
home
}
})
export default store

4.Axios（数据请求模块）

1)安装axios和js-cookie npm install axios js-cookie --save

2)配置axios

(1)配置请求封装部分 apiconfig/index.js

/* eslint-disable */

import axios from 'axios'

/** * 定义请求常量*/

export const baseUrl = "http://192.168.1.220:8001/api/update.ashx"

// 请求超时时间

axios.defaults.timeout = 2000;

// 请求拦截

axios.interceptors.request.use(

config => {

// 在发送请求之前做些什么

return config

},

error => {

// 对请求错误做些什么

return Promise.reject(error)

}

)

// 响应拦截axios.interceptors.response.use(response  => {// 对响应数据做点什么let {data} = response;if(response.config.url == baseUrl){return Promise.resolve(data.result);}else if(!data.Result){// 服务器错误处理return Promise.reject(data.Message);}else{return Promise.resolve(data.Data);}},error => {// 对响应错误做点什么return Promise.reject(error)})// 封装post请求export function fetch(requestUrl, params = '') {return axios({url: requestUrl,method: 'post',data: {'body': params}})}
(2)定义模块请求 api/home-api.js/*** 引入fetch* @param params* @returns {*}*/import {fetch} from 'config/index'// 获取UserIDexport function GetUserAndKey(params) {return fetch('http://192.168.1.220:8002/api/GetUserAndKey.ashx', params)}
(3)在页面使用import * as homeApi from 'api/home-api'  // 引入apiexport default {name: '',data() {return {};},watch: {},methods: {getUserAndKey(){let params = {"UserID":"","KeyID": ""}homeApi.GetUserAndKey(params).then((res) => {console.log(res);}).catch(() => {})},},computed: {}};(4)在文件里引入fetch方法，可以简写成'config/index'，需要做以下配置找到build/webpack.base.conf.js文件下resolve.alias添加代码resolve: {extensions: ['.js', '.vue', '.json'],alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src'),'config': resolve('src/apiconfig'),//添加的代码'api': resolve('src/api'),//添加的代码}},
4.跨域问题
在vue-cli里面已经配置了解决跨域问题的模块，
我们可以在config/index.js里面配置一下要代理的地址，
将以root开头的api转发出去，将地址指向接口地址
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {'/root/':{target: 'http://xxx'} //添加的代码
},
使用Less
1.安装less和less-loader npm install less less-loader --save-dev
2.配置less
在build/webpack.base.conf.js 的module.exports.module.rules 里面添加
{test: /\.less$/,loader: 'style-loader!css-loader!less-loader',
}
3.使用less
<style scoped lang="less"></style>
移动端适配
1.安装lib-flexible npm i lib-flexible --save
2.引入lib-flexible
在main.js添加 import 'lib-flexible/flexible'
3.安装px2rem-loader npm install px2rem-loader
4.配置px2rem-loader
在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，在generateLoaders方法中添加px2remLoader// 添加的代码const px2remLoader = {loader: 'px2rem-loader',options: {remUnit: 75 // 这里设置html根字体，vant-UI的官方根字体大小是37.5}}// generate loader string to be used with extract text pluginfunction generateLoaders (loader, loaderOptions) {const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader, px2remLoader]// 添加的代码if (loader) {loaders.push({loader: loader + '-loader',options: Object.assign({}, loaderOptions, {sourceMap: options.sourceMap})})}// Extract CSS when that option is specified// (which is the case during production build)if (options.extract) {return ExtractTextPlugin.extract({use: loaders,fallback: 'vue-style-loader'})} else {return ['vue-style-loader'].concat(loaders)}}
5.注意事项
不用在index.html的头部加name为viewport的meta标签，flexible会自动为我们添加；
对css中文字样式增加/* px */后缀，会编译出适应不同dpr的字号；
font-size: 28px; /* px */
对边框样式增加/* no */后缀，会保持原样；
border: 1px solid #fff; /* no */
移动端页面切换动画
移动端一般，第一级菜单切换不需要转场动画，第一级菜单向第二级菜单转场时需要过渡动画
使用vue的transition
1.在 App.vue设置动画<template><div id="app"><transition :name="transitionName"><router-view class="Router"></router-view></transition></div></template><script>import Vue from 'vue'window.Vue = Vue;export default {name: 'App',data() {return {transitionName: "fade"};},created:function(){},methods: {},watch: {$route() {// 监听路由变化重新赋值if (this.$router.isleft) {this.transitionName = "slideleft";}else if (this.$router.isright) {this.transitionName = "slideright";}else{this.transitionName = "fade";}}}}</script><style lang="less">@import "./styles/index.less";#app {-webkit-tap-highlight-color:rgba(0,0,0,0); font-family: "Avenir", Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;font-size: 28px;}.Router {position: absolute;top: 0;left: 0;right: 0;width: 100%;height: 100%;transition: all 0.5s ease;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;}.fade-enter{opacity: 0;}.fade-leave-active {opacity: 0;}.slideleft-enter,.slideright-leave-active {opacity: 0;-webkit-transform: translate(100%, 0);transform: translate(100%, 0);}.slideleft-leave-active,.slideright-enter {opacity: 0;-webkit-transform: translate(-100%, 0);transform: translate(-100%, 0);}</style>
2.在rounter/index.js 配置路由跳转类// 需要左方向动画的路由用this.$router.togo('****')Router.prototype.togo = function (path) {this.isleft = truethis.isright = falsethis.push(path)}// 需要右方向动画的路由用this.$router.goRight('****')Router.prototype.goRight = function (path) {this.isleft = falsethis.isright = truethis.push(path)}// 需要返回按钮动画的路由用this.$router.goBack()，返回上一个路由Router.prototype.goBack = function () {this.isleft = falsethis.isright = truethis.go(-1)}// 需要replace使用this.$router.goReplace()Router.prototype.goReplace= function () {this.isleft = truethis.isright = falserouter.replace(path)}// 点击浏览器返回按钮执行，此时不需要路由回退Router.prototype.togoback = function () {this.isleft = falsethis.isright = true}
3、使用方法
this.$router.togo('****') // 进入页面,动画往左
this.$router.goRight('****') // 进入页面,动画往右
this.$router.goReplace('****') // 进入页面不保存当前页面,动画往左
this.$router.goBack('****') // 返回,动画往右
4、监听点击浏览器返回按钮 main.js 添加
window.addEventListener('popstate', function (e) {router.togoback()
}, false)
Ui框架
1.选择Vant
2.安装Vant npm i vant -S
3.导入组件 main.js添加
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant)
4.使用时还需要引入
import { Dialog } from 'vant';
打包
如果将项目打包用于移动端浏览器，则直接打包上传至服务器，使用nginx做下接口转发即可
如果想将打包的静态文件进一步打包成移动端应用，则需要修改以下config/index.js里build.assetsPublicPath
在config/prod.env.js新增baseUrl
其他
1.ios上点击元素会闪出来一个半透明的灰色框，这里需要在#app的css加一句css兼容
-webkit-tap-highlight-color:rgba(0,0,0,0);
2.解决点击事件300ms延迟，采用fastclick.js
安装npm install fastclick --save
在main.js 添加
import FastClick from 'fastclick'
FastClick.attach(document.body)
3.开发时配置浏览路径 config/index.js 修改host
如：host: '192.168.1.72',
4.eslint报错 找到build目录下的webpack.base.conf.js文件，注释掉其中的与有关的eslint规则即可
// ...(config.dev.useEslint ? [createLintingRule()] : []),
安装汇总
npm install vuex axios js-cookie vant fastclick lib-flexible px2rem-loader --save
npm install less less-loader --save-dev

2021-03-24 从零开始搭建vue移动端项目相关推荐

vue动态发布到线上_从零开始搭建vue移动端项目到上线
先来看一波效果图初始化项目 1.在安装了node.js的前提下,使用以下命令 npm install --g vue-cli 2.在将要构建项目的目录下 vue init webpack mypro ...
从零开始搭建vue移动端项目到上线的步骤
初始化项目 1.在安装了node.js的前提下,使用以下命令 npm install --g vue-cli 2.在将要构建项目的目录下 vue init webpack myproject(项目目录 ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
2021.03.24正则匹配符号
2021.03.24 正则表达式 from re import fullmatch 正则是一种用来处理文本数据的一种工具.(一般用于处理复杂的文本问题) 1)检测输入的数据是否是手机号? 2)检查输入 ...
vue移动端项目基础框架搭建
本文章,主要提供vue移动端项目基础框架搭建思路,每个独立的模块网上有很多相关的文档. 移动端vue项目基础框架搭建,主要包括6个步骤项目使用的脚手架vue-cli搭建模板,2.使用淘宝lib-fl ...
Vite2.0搭建Vue3移动端项目
Vite2.0搭建Vue3移动端项目一.搭建包含内容 vite版本.vue3.ts.集成路由.集成vuex.集成axios.配置Vant3.移动端适配.请求代理二.步骤 vite+ts+vue3只 ...
vue移动端项目日历组件，月周切换，点击进入上/下一个月
项目场景: Vue移动端项目的日历组件,移动端如果没有别的特别要求,一般用vant中的日历组件就OK,这里用的另一个.组件是网上找的,原网址:vue-hash-calendar,需要的请自行去看. 我 ...
Vue移动端项目---尚硅谷外卖
文章目录 Vue移动端项目--尚硅谷外卖项目目录结构介绍移动端适配头部和底部导航登录注册页面密码登录短信登录 Profile页面未登录已登录 Msite页面首页导航 ShopList ...

2021-03-24 从零开始搭建vue移动端项目