从头开始构建vue移动终端项目并上线的步骤

编辑：宝哥软件园来源：互联网时间：2021-08-29

新天龙八部

角色扮演 | 1.85G

评分

立即下载

初始化项目

1.在安装node.js的前提下，使用以下命令

NPM安装-GVue-CLI 2。在待建项目的目录下，

vue init webpack myproject(项目目录名)一路返回如下

在中间，将选择ESLint来检查项目代码样式。为了美观和效率，可以打开。可以使用vue路由器。不要担心红盒子里的两个测试。后者是询问安装依赖包使用哪一个。默认npm是好的；然后回车等待下载依赖；如果你很慢，你可以使用镜像。

下载完成后，您将看到以下提示：

跟着台阶走下去

然后在浏览器中输入localhost:8080，就可以进入vue的世界了

仅仅这些是不够的，这远远不是一个响应的应用框架。让我们正式构建一个移动项目。

首先，我们来看看刚刚建成的vue的项目结构

可以发现，在项目中有两个文件夹，资产和静态，用来存储静态文件。这不是冲突吗？其实不然，资产中存储的静态文件会被webpack处理，通常会放一些图片等静态资源，而静态不会受到webpack的影响，调用的时候也是用绝对路径调用，通常用来存储一些第三方静态资源库。

本项目将基于vue-cli的项目目录进行改造，集成了vue-router、vuex和axios，可以自动适应移动终端的大小。

在开始编写代码之前，让我们先来谈谈ESlint警告和错误。您可以选择性地修改验证规则，单击“引用”进行修改，或者使用/* eslint-disable */选择性地忽略验证

路由(虚拟路由器)

项目的路由是项目的基础。我们从路由开始。项目初始化时，vue-router被引入到项目中。在上图中，路由配置文件放在srcrouter中。根据我个人的习惯，我将上面的目录结构进行调整，如下

新创建的页面目录存储主逻辑页面，组件存储公共组件，路由器统一管理路由

如图，介绍了一个新的页面，可以通过这个进行路由跳转。$router.push('/Home ')

路由vue-cli几乎被封装，但没有什么需要改变的。让我们来看看vuex

状态管理模块

官网也对vuex做了更详细的介绍。如果不太了解它的功能，可以参考一下vuex是什么。在这里，您只讨论如何将其集成到项目中，并简要介绍其用法

(1)安装vuex

NPM安装vuex-保存(2)配置Vuex

根据个人开发习惯，vuex在项目中的配置也有所不同，但几乎是一样的，但也有很大的区别。比如官网推荐在actions中写异步操作来改变状态，但我更喜欢把请求数据等异步操作放到存储之外，通过commit来改变状态，这在后面的数据请求模块的包中会具体提到

废话少说，看下图

首先，创建一个状态文件夹来管理整个状态。将每个模块的状态分别写在模块中，如下所示

/** * home.js *用于home模块的状态管理*/作为类型从导入*./variation-type '/引入已定义的方法const home={ state : { number : 1 }。映射突变： {[类型。set _ num](状态，num){//通过调用状态修改状态。number=num}}，actions : {}，getter : {//定义getter。可以通过mapGetters扩展函数调用number : state={ returnstate . number } } } export defaulthome//export home模块突变类型定义一些修改状态的方法，如下

index.js中的统一输出，如下

从“vue”导入Vue从“vuex”导入Vuex从“home”导入。/modules/home ' import create logger from ' Vuex/dist/logger ' vue . use(Vuex)const debug=true export default new Vuex。存储({ modules: { home }，plugins: debug？[createLogger()] : [] //是否开启vuex的调试模式})这里使用了vuex的一个内置插件，如上图所示。打开后，可以在控制台中查看每次状态变化的修改信息，如下图所示

配置好这里的索引后，需要在main.js中注册

通过以上步骤，您可以在项目中使用状态。这里，以home.vue为例，看看下面的代码

从' vuex'/导入{mapvariations，mapgetters，mapstate}，引入map方法export default { data(){ return { num 33600 } }。方法：mapvariations({//调用setNum方法setnum: ' set _ num ' })，increment(){ this.numthis . setNum(this . num)//将this . num转移到setNum}}，Computed: {//.map getter([//通过getter获取状态数据//'//'number' //])，mapState({//({//通过state number: state=state获取状态数据。home . number })} vuex的介绍到这里就结束了，接下来我们继续看数据请求模块(axios

Axios(数据请求模块)

此前vue数据请求模块使用vue-resource，官方不推荐，放弃；说说axios的集成步骤和一些需要注意的地方

(1)安装axios和js-cookie

NPM安装axios-保存(2)配置Axios

在src目录下创建一个新的apiconfig文件夹来封装请求并定义一些关于请求的全局变量；同时，创建api文件夹分别声明各个模块的请求方法，如下图所示

让我们首先看看apiconfig中的公共封装部分；该请求将按如下方式处理

定义一些常量，如成功请求返回的状态、请求超时等。为请求制作一个公共包，并操作令牌的存储和拦截。请看下面的代码

/* eslit-disable */从' axios'/导入axios* * *定义请求常量* TIME_OUT，err _ ok */导出常量time _ out=1000//请求超时周期导出常量ERR _ OK=true//请求成功返回状态，字段和后台统一。export const base url=process.env base _ URL//全局URL是在全局变量process . env中引入和定义的，为方便转发，值为空字符串//request time out axios . defaults . time out=time out//封装请求拦截axios . interceptors . request . use(config={ lettoken=local storage . getitem(' token ')//Get token config . headers[' content-type ']=' application/JSON；charset=UTF-8 ' config . headers[' Authorization ']=' if(token！=null){ //如果token不为null，则向后台config . headers[' authorization ']=token } return config }传递token，错误={ return promise . reject(error)})//封装响应拦截。检查令牌是否过期axios . interceptors . response . use(response={ let { data }=response ef(data . message==' token failure！'){//如果后台返回的错误标志是token expired，请再次登录localstorage。RemoveItem ('token')//Token过期，删除token //，再次执行登录操作}否则{返回承诺。解析(响应)}}。error={ return promise . reject(error)})//package post请求导出函数fetch (requesturl，params=' '){ return xios({ URL : request URL，Method :' post，data : { ' body ' : params } })}上面的代码以post请求为例，将请求封装在公共中，并定义了一些常量供请求使用。此外，它分别拦截请求和响应，便于在返回请求或数据时对数据进行统一处理，这可以在代码的注释中看到。这里以登录为例。

让我们看看api模块，以home-api为例，看看代码

/* * *引入fetch，baseurl * @ paramparamparams * @从' config/index '/log in接口返回{ * } */导入{fetch，BaseUrl}导出函数log in no(Params){ return fetch(`$ { baseurl }/root/log in/check member login `，Params)} fetch方法和base URL被引入文件。为什么这里可以缩写为‘config/index’？需要在“build/webpack.base.conf.js”中添加以下代码，后面跟着api

这里，在导出登录方法loginUserNo之后，您可以在组件中使用该登录方法，如下所示

从“API/home-API”//import API import { err _ ok }从“config/index”//import request success status//request method log in(){ let params={ password : ' * * * * * * * * *，存储号： ' '，用户名： ' * * * * * * * * * * * * * ' } home API . loginuser no(params)。然后((RES)={let {data}=RES if (data。成功==err _ ok) {/。保存令牌localstorage.setitem ('token '，data.value.token)} else {})。catch (()={})}}点击登录后，可以调用request方法，但是这里还是有问题。

至于数据请求，一个不可避免的老问题是跨域。同样，点击上面的登录也会涉及到跨域无法申请的问题。幸运的是，vue-cli已经配置了一个模块来解决跨域问题。我们可以在config/index.js中配置以下地址，如下图所示

转发从根开始的api，并将地址指向接口地址，从而解决跨域问题。

至此，vue家族bucket的引入和应用基本完成，但是到目前为止，这个项目只能进行简单的路由跳转、状态存储和数据请求，我们的目标是一个移动应用框架，接下来我们要解决以下问题

移动适配问题移动ui框架介绍项目组织结构优化我们先从移动适配问题说起

项目调整

由于移动设备的屏幕大小和屏幕比例差异较大，移动项目的适配就显得尤为重要。这里我们主要使用flexible.js进行适配。如果你不知道，可以点击这里。这里我们以最常用的尺寸750*1334为例。

引入flexible.js，在main.js中引入flexible.js文件，在最外层的静态文件夹中引入flexible.js作为静态文件，如下图所示

使用less作为css预处理器，先安装less

(1)安装越来越少的装载机

NPM安装更少-加载-保存-开发(2)配置更少

add in module . exports . module . rules of build/web pack . base . conf . js

{ test: /。小于$/，loader: '样式加载程序！css加载器！Less-loader'}，然后在组件中使用时将lang='Less '添加到样式标签中，这样就可以正常使用less。在这里，我们将介绍几个较少的初始化项目文件，在src下创建styles文件夹，并将以下文件放入其中

在每个组件的样式标签中引入index.less和variable.less

style作用域lang=' less ' @ import ' ~ style/index . less '；@ import ' ~ style/variable . less '；hello { h1 { color: red。fs(38)；//mixin } }/style中的number size函数，然后在上面写像素的样式时，用mixin.less来定义，这样就可以实现对所有移动终端的适配问题。

移动页面切换和切换动画

这里，切换动画将被单独取出如下。作为移动终端，一般要求是一级菜单切换不需要过渡动画，一级菜单过渡到二级菜单时需要过渡动画；为了满足这一需求，提供了以下解决方案。

如果需要动画，肯定会用vue转场。不熟悉的可以看这里。这里实现动画的解决方案是判断路由的方向。下面的代码定义了路由配置文件中的路由方法

//用这个。$ router . to(' * * * ')router . prototype . Togo=function(path){ this。isreft=true this。isright=false this。push (path)}//需要正确方向动画的路线使用这个。$ router . go right(' * * * ')router . prototype . go right=function(path){ this。isright=这是真的。isreft=false this。push (path)}//对于需要返回按钮动画的路线，使用这个。$router.goBack()，返回到前面的路由router . prototype . goback=function(){ this。isright=truethis。isreft=false this。go(-1)}//点击浏览器返回按钮执行。此时，没有必要路由回路由器。prototype . Togo bock=function(){ this。isright=truethis。isreft=false }执行路线跳转时，在App.vue中判断滑动方向，指定动画方向。如果不需要动画，可以直接使用这个。$router.push('*** ')

template div id=' App ' transition : name=' transition name ' Router-view class=' Router '/Router-view/transition/div/templatescript export default { name : ' App '，data(){ return { transition name : ' slide left ' }，Watch: {$route() {//侦听路由更改并重新分配if (this。$ router . is ref){ this。过渡名称=' slideleft'} if (this。$ router . is right){ this . transitionname=' slide right ' } } } }/script style # app { font-family : ' Avenir '，Helvetica，Arial，sans-serif；-web kit-font-smooth :抗锯齿；-moz-OSX-font-smooth :灰度；文本对齐：中心；color : # 2c 3e 50；}.路由器{ position:绝对值；top : 0；left : 0；right : 0；宽度： 100%；高度： 100%；transition: all .5s ease-WebKit-transit : all . 5s ease；-moz-transit : all . 5s轻松；}.向左滑动-输入，slide right-left-active { opa city 3360 0；-web kit-transform : translate(100%，0)；transform: translate(100%，0)；}.slide left-left-active，slide right-enter { opa city 3360 0；-web kit-transform : translate(-100%，0)；transform: translate(-100%，0)；}/style用于组件时使用

这个。$router.goBack() //返回这个。$ router . to(' * * *)//输入详细信息的另一步是监听并单击浏览器返回按钮，并在main.js中编写以下代码

window . addeventlistener(' pop state '，函数(e) {router.togobock ()//router已导入以上}，false)移动UI框架选择

作为一个移动项目，上面的步骤其实已经很完美了。然而，当项目进度紧张或人力短缺时，此时引入移动ui就更加强大了。不需要自己打包一些UI组件。在这里，你可以使用mint-ui，你可以搜索它自己的优势。在这里，我们来谈谈mint-ui的介绍。

(1)安装mint-ui

Npm安装mint-ui -保存(2 (2)引入mint-ui

在main.js中引入mint-ui

从' mint-ui '导入mint-ui/lib/style.css'/导入cssVue.use(Mint) //全局使用，这样mint-ui的组件就可以在整个Vue项目中使用。

包装

包装中遇到的一些问题

(1)打包后点击ios上的元素会闪现出一个半透明的灰色框，需要在这里添加css进行兼容性-WebKit-tap-highlight-color : rgba(0，0，0，0)；放在#app的css里

(2)点击事件右侧300毫秒的延迟可以通过fastclick.js解决，参考以下代码

Npm安装快速点击-保存///从“快速点击”导入快速点击