一、VUE简介

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

二、Vue.js安装

2.1 兼容性

Vue不支持IE8及以下版本，Vue中使用了ECMAScript5特性，IE8及以下无法支持。

Vue支持所有兼容ECMAScript5的浏览器

2.2 安装方法

1.安装Node.js

Node.js自带npm环境，下载地址https://nodejs.org/en/download/

下载之后安装，cmd命令查看Node.js是否安装成功

查看指令：node –v

安装完成后，需要在node的主文件夹下建立两个文件夹：node_global和node_cache，这两个是用于存储nodejs的全局模块。然后需要在命令行修改配置

npm config set prefix “C:\Program Files\nodejs\node_global”

npm config set cache “C:\Program Files\nodejs\node_cache”

具***置以nodejs的安装位置为准

2.安装淘宝镜像

npm访问的是国外的网站，速度较慢，安装淘宝镜像加快速度

在cmd中执行，持久使用

 

npm config set registry https://registry.npm.taobao.org

此处设置的镜像一定要设置成持久型的，不然后续项目打开，安装构建工具的时候下载失败。

 

/*

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

回车，等待安装,

该方式安装的是临时使用的镜像，当有新的项目引入时，仍然是从npm去加载

*/

 

安装成功后，则将系统中npm的注册表源设置为国内的镜像了。

3.安装webpack

在完成上述两个步骤之后，输入

npm install -g webpack

4.安装Vue

设置系统环境变量path增加C:\Program Files\nodejs\node_global

cnpm install -g vue

5.安装vue-cli（脚手架，选择安装）

这个vue-cli是Vue官方提供的CLI，可以为单页面应用快速搭建（SPA）繁杂的脚手架。为现代前端工作流提供了batteries-included的构建环境。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。

 

cnmp install -g vue-cli

6.初始化demo

完成上述步骤之后，就可以初始化了//具体的执行过程

vue init webpack vue-projectName

其中，projectName是项目文件夹的名称。在执行初始化命令的时候，会依次有项目文件夹、项目名称、描述、作者等内容需要自行输入。

7.运行projectName

完成初始化后，会在初始化过程中指定文件夹下创建项目，以项目路径为D:\vueTest\vue-demo，项目名称为vue-demo为例

 

1.首先需要在命令行cd到vue-test，

d:

cd vueTest/vue-demo

 

2.然后运行cnpm install进行依赖包的安装

cnpm install

 

3.完成安装包的依赖后，执行cnpm run dev命令启动

cnpm run dev

 

3.使用localhost:8080可以访问,（由于当前电脑中8080端口被占用，所以我这边的端口号8081）可以看到如图1所示界面

vue入门实践

 

图 1程序运行界面

2.3.小结

在此处的demo项目，仅有一个欢迎界面，是系统自动生成的。可以使用webstrom软件进行项目的构建，因为使用的是现有的代码，所以使用webstrom构建的方法为了解，webstrom可以完成项目构建、编码、执行等工作，不需要再在命令行下进行执行。推荐使用。

三、Vue初识

在webstrom中打开项目，项目的结构如图2所示

vue入门实践

 

图 2 项目结构

 

其中重要的文件和文件夹有四个：index.html、App.vue、components和router，下面来依次介绍

3.1 index.html

index.html是最外层的框架，是项目的入口，index.html中的内容如图1所示，在页面的<body>中载入一个名字叫app的vue module，因此我们可以知道App.vue是嵌套在index.html中的。

3.2 App.vue

打开App.vue文件如图3所示。

vue文件都是如图3所示的结构，由三部分组成。

第一部分:最上边的<template>包含了用户最终能够在视图中看的各种文本框、按钮等内容；

第二部分:中间的<script>定义了这个组件(module)所涉及的数据和函数；

第三部分:最后的<style>定义了组件的样式等。

重点部分为<template>和<script>两部分

<template>中只有两句核心的代码：

<img src=”./assets/logo.png”>

<router-view></router-view>

上述两行代码，第一行表示在div中加入一个logo图片，第二个使用router-view标签。App.vue调用HelloWorld.vue组件，并将其显示在Logo的下方。

根据图1项目运行的页面可以看出，在logo下面还有一些超链接内容，因此这些内容应该是在router-view中定义的。

vue入门实践

 

图 3 App.vue

3.3 router/index.js

打开src/router文件夹可以看到，里面只有index.js文件，在这个文件中定义了项目的路由，如图4所示。

vue入门实践

 

图 4 index.js

页面所有的路由操作需要在index.js中进行配置,这个router文件是针对App.vue的路由，对应的内容会全部显示在<router-view><router-view>中。

图4中，第7-14行代码定义了路由相关的内容，在一个路由定义中，包含以下内容：

 

 

path:

配置访问路径；

name:

设置访问名字；

component:

设置组件位置；

children:

如果有子组件时，使用该属性进行配置，配置方法相同。

 

从图4中的路由可以看出，所以项目运行过程中的下一步会访问HelloWord.vue文件，且HelloWord.vue文件位于components/HelloWorld.该方式是通过router显式控制的，不是插入组件的形式。

3.4 HelloWorld.vue

HelloWorld.vue文件内容如图5所示。

vue入门实践

 

图 5 HelloWorld.vue

 

对于HelloWorld.vue，在<template>中定义了用户可以看到的界面如图1所示。

第3行中使用{{msg}}提取在<script>中data定义的msg中的数据，展示“Welcome to Your Vue.js App”,<template>中后面定义了一些超链接文件，并且用有两个<h2>标题

 

3.5小结

从初识可以看出，项目运行过程：index.html-->App.vue-->router/index.js-->HelloWorld.vue.

复杂的页面运行的流程与本文类似，只需要添加或修改相应的路由，增加对应的组件即可。

App.vue是父组件，可以在该文件中将通用框架搭好，然后在子组件中进行相应的设置修改。

四、添加组件

可以通过两种形式完成组件的引用，第一种是通过在router中直接配置children路由的形式，另一种是使用import来进行组件的导入。

4.1 children路由

在router/index.js文件中配置子组件，进行跳转。实例如图6所示

vue入门实践

 

图 6 children属性配置router

浏览器访问并点击Home链接后的界面如图7所示，我们可以看到此时url也发生了变化，变成了在router中配置的路径，因为FirstPart是使用的”/”路径，因此，点击Home链接首先进入FirstPart界面，当点击SecondPart时，URL会发生新的跳转。

vue入门实践

vue入门实践

 

 

图 7 子组件1

使用router进行组件引入存在一个问题：所有的组件都要对应一个URL地址，如果组件很多那么就要在index.js中进行相当大的部署工作。同时，并不是所有的组件都需要一个URL地址，因此，推荐使用4.2节的import的形式。

4.2 Import组件

在这部分的示例中，以创建一个菜单栏组件为例进行说明。本示例中使用现成的页面组件Element-UI，在智能客服系统中同样使用了Element-UI组件。

在使用Element-UI时首先需要在项目中进行Element-UI组件安装。执行如下代码：

npm install element-ui -save

执行完成后，Element-UI组件被安装在项目中，需要在main.js中引入Element-UI，这样才能使用该组件。

import Element from ‘element-ui’

import ‘element-ui/lib/theme-default/index.css’

Index.css文件需要单独手动import，在import上述两个文件之后，还需要添加一个语句

Vue.use(ElementUI)

到此为止，对于Element-ui组件的引用已经完成。此处，我们使用的虽然是第三方的组件，但是对于添加组件的过程却是相同的。使用import XXX from XXXX或import URL实现。

下面以导航条为例，说明如果是自定义的组件，应该如何引用。

修改App.vue中的布局如图8所示.，使用自定义菜单组件mynavbar。

vue入门实践

 

图 8 自定义App.vue文件内容

 

第14-20行代码就是组件的导出，有两种方法作为组件的导出，一种是new Vue({})的形式，一种就是使用export default{}，在main.js中使用的是第一种方式，本文示例使用第二种方式。当执行完export default之后，在别的组件中可以通过import App from ‘./App’来导入使用App组件。

下面将自定义的navbar组件的代码贴出，如图9所示。

<template>中是Navbar的布局，其中包含了一个二级菜单。

<script>中同样使用export default{}的方式进行导出，因此在App.vue中，使用import mynavbar from ‘./components/AppComponents/Navbar.vue’将该组件导入并使用。

vue入门实践

 

图 9 navbar组件

4.3小结

本章是使用VUE添加组件的两种方法。常用的是使用import方法，该方法仅引入组件就可以，不需要为每个组件都配置一个URL。

使用组件需要三步：

  1. 编写组件，并export
  2. 在需要引入组件的文件中，import相关组件
  3. 使用组件标签，如<mynavbar></mynavbar>

五、参考

Vue.js: https://cn.vuejs.org/

Element: http://element.eleme.io/#/zh-CN/component/container

原文链接：来源网络，如有侵犯到您的权益请联系zengyin969@gmail.com进行下架处理