vue入门实践
一、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所示界面
图 1程序运行界面
2.3.小结
在此处的demo项目,仅有一个欢迎界面,是系统自动生成的。可以使用webstrom软件进行项目的构建,因为使用的是现有的代码,所以使用webstrom构建的方法为了解,webstrom可以完成项目构建、编码、执行等工作,不需要再在命令行下进行执行。推荐使用。
三、Vue初识
在webstrom中打开项目,项目的结构如图2所示
图 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中定义的。
图 3 App.vue
3.3 router/index.js
打开src/router文件夹可以看到,里面只有index.js文件,在这个文件中定义了项目的路由,如图4所示。
图 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所示。
图 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所示
图 6 children属性配置router
浏览器访问并点击Home链接后的界面如图7所示,我们可以看到此时url也发生了变化,变成了在router中配置的路径,因为FirstPart是使用的”/”路径,因此,点击Home链接首先进入FirstPart界面,当点击SecondPart时,URL会发生新的跳转。
图 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。
图 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’将该组件导入并使用。
图 9 navbar组件
4.3小结
本章是使用VUE添加组件的两种方法。常用的是使用import方法,该方法仅引入组件就可以,不需要为每个组件都配置一个URL。
使用组件需要三步:
- 编写组件,并export
- 在需要引入组件的文件中,import相关组件
- 使用组件标签,如<mynavbar></mynavbar>
五、参考
Vue.js: https://cn.vuejs.org/
Element: http://element.eleme.io/#/zh-CN/component/container
原文链接:来源网络,如有侵犯到您的权益请联系zengyin969@gmail.com进行下架处理