vue实战教程

目录
vue实战教程 1
前言 2
运用vue脚手架搭建开发环境 2
一， 什么是vue脚手架 2
二， 安装脚手架之前准备工作 3

1. 安装node.js和npm 3
   2， 安装vue-cli脚手架构建工具 4
   三， 用vue-cli创建项目 4
   四， 项目文件的介绍 9
   五， 介绍实践项目的功能以及需要了解的技术 10
   六， 开始项目开发 12
   首页制作 12
   路由配置 17
   报表界面的制作 24
   表格界面的制作 37
   表格的增删除改查 53
   第一个地方：新增 77
   第二个地方：修改 78
   第一处：在新增弹出框界面里，点击确定时调用。 80
   第二外：在修改弹出框界面里，点击确定时调用。 81

vue实战教程
作者：零下一度
前言
最近一两年前端开发提倡前后端分离，组件化开发，因而很多企业项目开发，都不在使用纯的hmtl+css+jquery，而是使用如：React、Vue、Angular这三个框架来搭建前端界面。我所在的公司也要赶潮流，没办法作为前端技术人员只能顺势而为，因此我们现在的所有新项目都采用的是vue框架来搭建前端界面。
在我们刚刚采用vue搭建前端项目的时候，发现非常痛苦，因为这些框架都是刚流行起来的，网上介绍比较少，虽然现在网上的学习文档比较丰富了，但是大多数都是介绍基础知识的，很少有文档在介绍如何在企业开发中运用vue搭建一个项目的前端界面，并和后台实现数据对接。为了让刚刚有vue基础知识，但不知道在项目中如何运行这些技术来实现项目开发的同志一个指导，我整理了这一年运用vue开发项目的实际经验，希望对vue新手能快速进入项目开发有一定的帮助。不用像我当初一样，摸不头，走了很多弯路。
运用vue脚手架搭建开发环境
一，什么是vue脚手架
对于一些基础的，常规的实现，我们利用一种工具，在工具里设置好我们要的效果，让工具来自动生成标准的代码，这种模式叫做脚手架,Vue利用Vue-CLI来生成脚手架，从而来构建，运行项目，这样你就可以专注在撰写你的应用上，而不必花好几天去纠结配置的问题。通俗来说，vue就是通过vue-cli这个工具来实现项目的搭建，编译，运行，打包等功能。
二，安装脚手架之前准备工作

1. 安装node.js和npm
   Vue的脚手架是依赖于node.js的，所以无论是安装新版本还是旧版本，我们都要安装node.js。
   从node官网下载并安装node，安装步骤很简单，只要一路“next”就可以了。
   安装完成后，打开命令行工具输入命令node -v，如下图，如果出现对应版本号，就说明安装成功了。

我们所需要的npm包管理器，是集成在node中的，所以，直接输入npm -v就会如下图所示，显示出npm的版本信息。

2，安装vue-cli脚手架构建工具
进入到cmd命令框输入npm install --global vue-cli 。

这个安装还是要几分钟，如果你的网络条件不是很好，可以使用另外一个安装命令：cnpm install --global vue-cli （由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue-cli）。安装成功后将显示如下界面：

三，用vue-cli创建项目

一般在传统项目开始中比如用纯的html/css/js开发时，一般会在本地手动创建文件目录，而用脚手架创建项目时就不需要这样，只需要建立一个存放项目的文件夹，然后在命令提示符窗口，cd目录到文件文件夹下，输入：vue init webpack 项目名称，然后回车就可以了。如：我们在本地建立一个文件夹“vue-obj”,然打开“命令提示符”窗口，一直cd到“vue-obj”文件夹下，输入：“vue init webpack 项目名称”。（项目名称：指的就是我们自己命名的项目名）如下图：

按下回车后，它会显示一些提示信息，如下图：

它的意思是项目名称叫：vue-obj,如果你确定取这个项目名，按下enter即可。接下来会出现下图提示。

意思是叫项目的描述信息，直接按钮enter即可。接下来又显示下图提示：

它显示的是作者信息，也直接enter。然后又显示如下图提示：

意思是叫你确定是否安装vue-router（路由），这个根据项目自身情况来选择。我们这里选择输入：n。我们后面用到路由时再安装。接下来又提示下图：

意思是让你确定是否安装代码校验。eslint是一个JavaScript的校验插件，通常用来校验语法或代码的书写风格。如果安装了,你写的js代码风格有问题都会给你打印出来，反正我不喜欢。这个看个人了。我一般选择n。接下来又显示如下图：

意思是让你确定是否设置单元测试，一般也是选择n。接下来又显示下图：

意思是让你是否安装e2e自动化测试，一般也是输入n。接下来就开始创建项目了。

创建项目还是要花几分钟，当然还是和你网络有关系，创建成功后将显示下图提示：

接下来我们就可以按照上图画后的地方，依次输入命令：cd vue-obj 回车

npm run dev 回车

如果出现下图所示：

说明项目创建成功。我们在浏览器窗口输入： “http://localhost:8080” 如果显示如下界面，那恭喜你，项目创建并启动成功了！

四，项目文件的介绍
用vue-cli创建成功项目后，我们在本地新建的文件夹下面会自动生成很多文件。如下图所示：

下面我们分别介绍一下，各个文件的大概作用。以后在项目开发中会叫到每个文件夹的具体作用，只里需要了解一下。

五，介绍实践项目的功能以及需要了解的技术
我拿我实际开发中的项目的一部分作为demo来讲解，首先我们看一下我们要开发的项目的原型。

它主要由两个页面，一个是报表界面，另一个是表格界面。
其中‘报表’与“表格”菜单的切换是通过vue-router来实现的。

下图报表展示是通过echarts来实现的。

下图表格是通过element-ui来实现的。

该系统上显示的数据，都是从后台读取的的，所以我还会介绍如何用vue-resource或axios从后台读取数据，并实现表格的增删除改查功能。
所以我们这次需要介绍的技术echarts,vue-resource,vue-router,element-ui,axios等相关技术。
六，开始项目开发
首页制作
第一步，使用开发工具打开上面新建的文件夹“vue-obj”，我用的工具是webstrom,你可以按你自己的需求使用不同的开发工具。
第二步：我们展开左侧的目录结构，并双击App.vue文件。我们可以发现，我们运行项目时，在浏览器上看到的内容，就是“App.vue”是的内容。所以App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。

第三步：因为我们还没有配置路由，所以我们就把’App.vue’当做我们的首页。我们这里要注意，在vue开发中我们主要是在src这个文件夹页面写代码。其中：“assets”主要放静态文件如img,css这些。有时我们也会把css,img放到如下图：’static’文件夹下面。我们的组件都放在“components”里。’Main.js是我们的入口文件，主要作用是初始化vue实例,并引入需要使用的插件。
目录结构：

Main.js：

第四步：我们在“vue-obj-static”下面建立两个文件夹，用来放置图片和css文件。（上面说了静态文件除了放到src-assets下面，也可以放到static下面）。

我们新建css文件存放到vue-obj\static\css下面，并把需要的图片也存放到vue-obj\static\img下。
第五步：在main.js文件里，把新建的css文件引入进来：
import ‘…/static/css/base.css’

第六步：删除掉App.vue里默认的内容，把我们需要的首页内容写入进去：

• 报表
• 表格

内容

注意：
：这里我们写html的地方。

：这里是我们写js的地方 ：这里是写我们css的地方。一般对该页特有的样式，我们就写在这里，如果是很多页共用的样式，我们还是写在vue-obj\static\css文件里。