18600329666

咨询技术专家

扫一扫
与技术专家在线沟通

Menu

vue用户界面渐进式框架的使用详解

来源：未知　时间：2018-20-2　浏览次数：309次

       vue.js是一款用于构建用户界面的渐进式MVVM框架，可以轻松实现数据和展示的分离，在java web开发中spring boot+vue实现view层和数据层的分离，使得开发团队之间的耦合性大大降低，本文从vue.js的知识准备，vue.js的开发环境搭建，以及深入学习等方面介绍其使用
一、知识准备
  • 具备前端开发基础知识，js，html，css
  • 前端模块化知识，既将一组相关操作封装在对象（ECMASCRPT=es已经提供支持）或函数中
  • 对ES6有初步了解
二、初识vue.js项目目录结构
目录/文件 说明
build 项目构建(webpack)相关代码
config 配置目录，包括端口号等。我们初学可以使用默认的。
node_modules npm 加载的项目依赖模块
src

这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

  • assets: 放置一些图片，如logo等。
  • components: 目录里面放了一个组件文件，可以不用。
  • App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
  • main.js: 项目的核心文件。
static 静态资源目录，如图片、字体等。
test 初始测试目录，可删除
.xxxx文件 这些是一些配置文件，包括语法配置，git配置等。
index.html 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档，markdown 格式

vue.js是前端框架，执行过程实际是将模块化文件.vue文件中html，js，css最终解释成为一个能被浏览器识别html文件并存放在build文件夹中
三、vue.js开发环境npm的安装使用
  • 安装node.js,node.js是一个javascript运行环境，实质是对Chrome V8引擎进行了封装
       从node.js官网下载并安装node，安装过程点击下一步下一步， 安装完成之后，打开命令行工具，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。
      
 
         npm包管理器，是集成在node中的，所以，直接输入 npm -v就会如下图所示，显示出npm的版本信息。

 
  • 安装cnpm
      在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然后等待，安装完成如下图。

 
  • 安装vue-cli脚手架构建工具
       在命令行中运行命令 npm install -g vue-cli ，然后等待安装完成。通过以上三部，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目。
  • 用vue-cli构建项目
       要创建项目，首先我们要选定目录，然后再命令行中把目录转到选定的目录。在这里，我选择桌面来存放新建的项目，则我们需要先把目录cd到桌面，如下图。
      
 
       在桌面目录下，在命令行中运行命令 vue init webpack firstVue 。解释一下这个命令，这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项        目是基于webpack的。其中firstVue是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中（我的实例中，会在桌面生成该文件夹），(运行初始化命令的        时候回让用户输入几个基本的选项，如项目名称，描述，作者等信息,如果不输入则直接回车方可)如下图。
         打开firstVue文件夹，项目文件如下所示。
       这就是整个项目的目录结构，其中，我们主要在src目录中做修改。这个项目现在还只是一个结构框架，整个项目需要的依赖资源都还没有安装，如下图。

 
  • 安装项目所需的依赖：首先cd到项目文件夹（firstVue文件夹），然后运行命令 cnpm install 
       安装完成之后，会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹，这里边就是我们项目需要的依赖包资源。
  • 运行项目
      在项目目录中，运行命令 npm run dev ，会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。
 
           这里简单介绍下 npm run dev 命令，其中的“run”对应的是package.json文件中，scripts字段中的dev，也就是 node build/dev-server.js命令的一个快捷方               式。项目运行成功后，浏览器会自动打开localhost:8080（如果浏览器没有自动打开，可以手动输入）。运行成功后，会看到如下所示的界面。
 
四、vue.js代码实例
五、vue.js运行原理
六、结束语
本文讲解了vue.js的基本使用和执行原理，以及vue.js的基本定义，下一篇将着重讲spring  boot与vue.js的整合使用