疾饭饭

欢迎来到疾饭饭的博客,你会发现这里什么都没有

VUE框架的学习和使用

1、技术概述,描述这个技术是做什么?学习该技术的原因,技术的难点在哪里。控制在50-100字内。

1、VUE概述

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

2、学习原因

项目需要,由于alpha冲刺阶段,原前端组在Android Studio上进行界面设计的失败,同时为了开发更加流畅,决定采用VUE框架来进行前端界面的重构。

3、技术难点

首先要熟悉VUE的概念原理,即MMVM框架,弄清楚它的实现方式,其次还得熟练的应用VUE框架中其他附加操作,如各种模块的引入以及VUEX相关的使用,尤其是VUEX,这关系着项目数据的操作。

2、技术详述,描述你是如何实现和使用该技术的,要求配合代码和流程图详细描述。可以再细分多个点,分开描述各个部分。

1、如何实现和使用

首先一开始先去VUE官方查看,了解到像我们这种项目开发最好通过VUE-CLI脚手架来进行VUE架构的搭建,于是去找教程,知道要先安装Node.js,一个服务端的JavaScript运行环境,通过Node.js可以实现用JavaScript写独立程序。
安装好后在命令行输入 node -v,如果出现了版本号,说明已经安装好了:
avatar

然后安装代理,不然之后相关SDK的安装很慢:

npm install -g cnpm --registry=https://registry.npm.taobao.org

全局安装 vue-cli

npm install --global vue-cli

新建工程

vue init webpack my-project
avatar
avatar

Webpack是一个前端打包和构建工具,相当于 Gradle 。

运行项目,执行上面的命令后,会在执行的目录下生成 my-project 文件夹,然后在命令行中 cd 到该文件夹下面,执行

cd my-project

cnpm install

npm run dev
avatar
然后在浏览器中输入,就可以看见网页了。
http://localhost:8080
avatar

代码结构
avatar

2、从视频中观看,边看边练习

avatar

3、技术使用中遇到的问题和解决过程。要求问题的描述和解决有一定的内容,不能草草概括。要让遇到相关问题的人看了你的博客之后能够解决该问题。

1.VUE中axios跨域问题

server 端不支持跨域,比如当输入URL时,遇到下面的错误就是这种情况

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://xxx.com' is therefore not allowed access.
解决方法:修改vue架构下的config文件夹下的index.js
avatar

跨域问题参考博客

2.VUE中VUEX相关数据操作问题

界面跳转时,相关数据无法存储,导致跳转到另外的界面时,由于数据消失,导致无法在当前界面进行相应数据渲染
avatar
解决方法:通过VUEX进行相应数据的存储,以及在各个界面的使用渲染
avatar
avatar
avatar
VUEX问题参考博客

4、进行总结。

算是第一次主动去学习如此完整的框架技术吧,其实很早就听说过VUE框架,一个非常有利于前后端分离开发的框架。在学习过程中,动手最重要,光看没有用,只有自己去动手才能熟悉VUE的架构,多看看相关教学视频,多去做练习,多掌握一门技术总是好的。

5、列出参考文献、参考博客(标题、作者、链接)。

1.VUE环境搭建

作者:Aisier丶

点击进入

2.VUE官方文档

作者:Evan You

点击进入

3.VUEX官方文档

作者:Evan You

点击进入

4.VUE实战教程

作者:尚硅谷官方

点击进入

posted on 2020-06-14 21:37  疾饭饭  阅读(363)  评论(0编辑  收藏  举报

导航