13、VUE单文件工程

1、为什么要使用单文件工程？

1、Vue.js路由组件的不方便

不支持引用HTML页面，以至于template里面定义的标签会编辑器当字符串，这让编辑变的困难。

 

 

2、Vue.js于Node.js语言结合

       

 

 

 

2、搭建Vue项目环境

2.1. 安装Node.js

          简单的说 Node.js 就是运行在服务端的 JavaScript。

 

Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。

 

Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

在Windows上安装 Node.js很方便，只需要访问node.js官网 http://www.nodejs.org/，点击Download链接，然后选择Windows Installer，下载安装包。下载完成后直接双击安装，和其它一般软件安装一样

 

 

2.2. 安装Webpack

        Webpack是node.js的一个组件。

        WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

        安装命令：

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

       -g表示全局安装

        因为node.js的组件库位置在国外，因此国内安装的时候会非常慢，所以可以采用镜像的方式来安装（使用淘宝镜像库 --registry=https://registry.npm.taobao.org

）

 

2.3. 安装vue-cli

         Vue-cli是个构建工具，他能大大的降低webpack的使用难度，支持热更新。

         

vue-cli 是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，分为vue init webpack-simple 项目名 和vue init webpack 项目名 两种。

 

安装命令：

npm install vue-cli -g  --registry=https://registry.npm.taobao.org

2.4. 创建工程

         进入你想要建立的项目的文件夹中，输入以下命令。

         命令：

            vue init webpack my--project

 

 

 

 

 

2.5. 启动项目

         命令：

          npm install

          -- npm install是用来安装package.json的组件，类似于C#里面的packages.config，只执行一次即可

 

         npm run dev

          -- 运行

 

 

3、工程目录介绍

 

 

3.1. Static目录

存放的是静态文件，比如字体和图片。

 

3.2. Build目录

        存放最终发布的代码文件。

3.3. Config目录

存放配置文件。

 

 

 

 

3.4. Src/assets目录

 

 

    存放素材文件。

3.5. Src/components目录

        存放组件文件。

3.6. Src/router目录

         存放路由文件。

 

 

 

3.7. Package.json目录

项目的安装的库和版本信息。Npm install 命令就是安装其中里面的库。

安装后的组件放到了目录node_modules中。

 

        

3.8. Index.html目录

 

 

有同学就问了，为什么这个页面中不引入咱们之前学习的vue.js文件呢？

大家要注意，咱们这个这个单文件工程都是由node.js管理，由node.js会加载vue.js，不需要开发人员特别引用vue.js。

那么咱们生成vue对象是在哪里创建的呢？

答案是在main.js中

 

 

这里的模板 template名字叫App,那我们就能找到这个App.vue

 

 

 

4、创建vue文件示例

4.1. 创建vue文件

 

 

注意：标签<template>下面有且只有一个标签，不能有多个，有多个会报错。

报错信息：

 

 

 

 

4.2. 配置路由

 

 

4.3. 查看效果

 

5、单元测试

 

5.1. Mocha(魔卡)测试框架

         Mocha诞生自2011年，是现在最流行的JS测试框架之一，在浏览器和Node环境中都可以使用。

         所谓的测试框架，就是运行测试的工具。通过她，可以为JS应用添加测试，从而保证代码的质量。

         之前创建单页面应用的时候选用了Mocha测试框架，所以不必再安装。

 

 

测试文件位于/test/unit/specs中。

 

 

 

 

运行测试：

 

 

运行结果：

 

 

6、生产环境部署

 

 

意思：

运行”npm run dev”的时候执行的是build/dev-server.js文件，

运行”npm run build”的时候执行的是build/build.js文件。

 

 

生产环境部署：

 

Npm run build是将vue项目编译。

Npm start  启动vue项目

 

7、Vue.js Ajax(axios)

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

Github开源地址： https://github.com/axios/axios

 

  安装：

       $ npm install axios

 

 使用：