vue实战教程（如何用脚手架开发一个项目）

1、目录vue实战教程1前言2运用vue脚手架搭建开发环境2一， 什么是vue脚手架2二， 安装脚手架之前准备工作31. 安装node.js和npm32， 安装vue-cli脚手架构建工具4三， 用vue-cli创建项目4四， 项目文件的介绍9五， 介绍实践项目的功能以及需要了解的技术10六， 开始项目开发12首页制作12路由配置17报表界面的制作24表格界面的制作37表格的增删除改查53第一个地方：新增77第二个地方：修改78第一处：在新增弹出框界面里，点击确定时调用。80第二外：在修改弹出框界面里，点击确定时调用。81vue实战教程作者：零下一度前言 最近一两年前端开发提倡前后端分离，组件化开发，因而很多企业项目开发，都不在使用纯的hmtl+css+jquery，而是使用如：React、Vue、Angular这三个框架来搭建前端界面。我所在的公司也要赶潮流，没办法作为前端技术人员只能顺势而为，因此我们现在的所有新项目都采用的是vue框架来搭建前端界面。 在我们刚刚采用vue搭建前端项目的时候，发现非常痛苦，因为这些框架都是刚流行起来的，网上介绍比较少，虽然现在网上的学习文档比较丰富了，

2、但是大多数都是介绍基础知识的，很少有文档在介绍如何在企业开发中运用vue搭建一个项目的前端界面，并和后台实现数据对接。为了让刚刚有vue基础知识，但不知道在项目中如何运行这些技术来实现项目开发的同志一个指导，我整理了这一年运用vue开发项目的实际经验，希望对vue新手能快速进入项目开发有一定的帮助。不用像我当初一样，摸不头，走了很多弯路。运用vue脚手架搭建开发环境1， 什么是vue脚手架对于一些基础的，常规的实现，我们利用一种工具，在工具里设置好我们要的效果，让工具来自动生成标准的代码，这种模式叫做脚手架,Vue利用Vue-CLI来生成脚手架，从而来构建，运行项目，这样你就可以专注在撰写你的应用上，而不必花好几天去纠结配置的问题。通俗来说，vue就是通过vue-cli这个工具来实现项目的搭建，编译，运行，打包等功能。2， 安装脚手架之前准备工作1. 安装node.js和npmVue的脚手架是依赖于node.js的，所以无论是安装新版本还是旧版本，我们都要安装node.js。从node官网下载并安装node，安装步骤很简单，只要一路“next”就可以了。安装完成后，打开命令行工具输入命

3、令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）。安装成功后将显示如下界面：3， 用vue-cli创建项目一般在传统项目开始中比如用纯的html/css/js开发时，一般会在本地手动创建文件目录，而用脚手架创建项目时就不需要这样，只需要建立一个存放项目的文件夹，然后在命令提示符窗口，cd目录到文件文件夹下，输入：vue init webpack 项目名称，然后回车就可以了。如：我们在本地建立一个文件夹“vue-obj”,然打开“命令提示符”窗口，一直cd到“vue-obj”文件夹下，输入：“vue init webpack

4、 项目名称”。（项目名称：指的就是我们自己命名的项目名）如下图：按下回车后，它会显示一些提示信息，如下图：它的意思是项目名称叫：vue-obj,如果你确定取这个项目名，按下enter即可。接下来会出现下图提示。意思是叫项目的描述信息，直接按钮enter即可。接下来又显示下图提示：它显示的是作者信息，也直接enter。然后又显示如下图提示：意思是叫你确定是否安装vue-router（路由），这个根据项目自身情况来选择。我们这里选择输入：n。我们后面用到路由时再安装。接下来又提示下图：意思是让你确定是否安装代码校验。eslint是一个JavaScript的校验插件，通常用来校验语法或代码的书写风格。如果安装了,你写的js代码风格有问题都会给你打印出来，反正我不喜欢。这个看个人了。我一般选择n。接下来又显示如下图：意思是让你确定是否设置单元测试，一般也是选择n。接下来又显示下图：意思是让你是否安装e2e自动化测试，一般也是输入n。接下来就开始创建项目了。创建项目还是要花几分钟，当然还是和你网络有关系，创建成功后将显示下图提示：接下来我们就可以按照上图画后的地方，依次输入命令：cd vue-o

5、bj 回车npm run dev 回车如果出现下图所示：说明项目创建成功。我们在浏览器窗口输入： “http:/localhost:8080” 如果显示如下界面，那恭喜你，项目创建并启动成功了！4， 项目文件的介绍用vue-cli创建成功项目后，我们在本地新建的文件夹下面会自动生成很多文件。如下图所示：下面我们分别介绍一下，各个文件的大概作用。以后在项目开发中会叫到每个文件夹的具体作用，只里需要了解一下。5， 介绍实践项目的功能以及需要了解的技术 我拿我实际开发中的项目的一部分作为demo来讲解，首先我们看一下我们要开发的项目的原型。它主要由两个页面，一个是报表界面，另一个是表格界面。其中报表与“表格”菜单的切换是通过vue-router来实现的。下图报表展示是通过echarts来实现的。下图表格是通过element-ui来实现的。该系统上显示的数据，都是从后台读取的的，所以我还会介绍如何用vue-resource或axios从后台读取数据，并实现表格的增删除改查功能。所以我们这次需要介绍的技术echarts,vue-resource,vue-router,element-ui,axi

6、os等相关技术。6， 开始项目开发首页制作第一步，使用开发工具打开上面新建的文件夹“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-asset

7、s下面，也可以放到static下面）。我们新建css文件存放到vue-objstaticcss下面，并把需要的图片也存放到vue-objstaticimg下。第五步：在main.js文件里，把新建的css文件引入进来：import ./static/css/base.css第六步：删除掉App.vue里默认的内容，把我们需要的首页内容写入进去： 报表表格 内容 export default name: App 注意：这里我们写html的地方。：这里是我们写js的地方：这里是写我们css的地方。一般对该页特有的样式，我们就写在这里，如果是很多页共用的样式，我们还是写在vue-objstaticcss文件里。在cmd命令提示符里：输入命令:npm run dev。运行成功后打开浏览器，访问”http:/localhost:8080”将看到如下页面。（样式我都写在css文件里）路由配置在项目介绍的时候，我们说过这个demo主要有两个页面，一个叫“报表”一个叫“表格”，并是通过路由来切换。在配置路由之前我们，首页要新建这两个页面。第一步：选择src-components，右键-New-file

8、输入Chart.vue确定。以同样方式新建：Table.vue，并在这两个文件里写入一点测试代码（等会用来测试是否切换成功）Chart.vue 报表 Table.vue 表格 第二步：切换的页面建立好后，接下来我们就开始来安装，配置，使用路由。vue-router是什么 ：这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是WebApp的链接路径管理系统，用来做页面跳转的。vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质就是建立起url和页面之间的映射关系。 至于我们为啥不能用a标签，这是因为用Vue做的都是单页应用，就相当于只有一个主的index.html页面，所以你写的标签是不起作用的，你必须使用vue-router来进行管理。安装路由：首页结束掉运行的项目，在cmd命令提示符里输入：CTRL+C”选择“Y”,然后到项目下，输入:npm install vue-router -save然后回车。（以后都要记住，需要在cmd命令提示符是安装东西时，都需要先结束掉运行的项目）引入路由：安装完成后需要将路由引入，有两种方式引入路由。我们这里采用第二种方式。第一种：打开ma

《vue实战教程（如何用脚手架开发一个项目）》由会员工***分享，可在线阅读，更多相关《vue实战教程（如何用脚手架开发一个项目）》请在金锄头文库上搜索。