构建vue实战项目

基础知识

前后端分离

交互形式

浏览器----（请求接口）-----服务器

在前后端分离架构中，后端只需要负责按照约定的数据格式向前端提供可调用的API服务。前后端之间通过HTTP请求进行交互，前端获取到数据后，进行页面的组装和渲染，最终返回给浏览器。

代码的组织方式

代码的彻底分离：
前后端代码库分离。前端代码中有可以进行Mock测试(通过构造虚拟测试对象以简化测试环境的方法)的伪后端，能支持前端的独立开发和测试。后端代码中除了功能实现外，还有着详细的测试用例，以保证API的可用性，降低集成风险。

开发模式

产品/领导/客户提出需求
UI做出设计图
前后端约定接口&数据&参数
前后端并行开发（无强依赖，可前后端并行开发，如果需求变更，只要接口&参数不变，就不用两边都修改代码，开发效率高）
前后端集成
前端页面调整
集成成功
交付

接口规范流程

在开发期间前后端共同商定好数据接口的交互形式和数据格式。然后实现前后端的并行开发，这个步骤是前后端分离最为重要的。

1. 前端工程师在开发完成之后可以独自进行mock测试；
2. 后端也可以使用接口测试平台进行接口自测；
3. 前后端一起进行功能联调并校验格式，最终进行自动化测试。

---

页面的 url 构成

http://www.baidu.com/login.html?wd=vue&ie=UTF-8#test/index

如上的 url 由以下部分组成：

• http:// 规定了页面采用的协议。
• www.baidu.com/ 为页面所属的域名。
• login.html为读取的文件名称。
• ?wd=vue&ie=UTF-8 给页面通过 GET 方式传送的参数
• #test/index 为页面的锚点区域

前面四个发生改变的时候，会触发浏览器的跳转亦或是刷新行为，而更改 url 中的锚点，并不会出现这种行为，因此，几乎所有的 spa 应用都是利用锚点的这个特性来实现路由的转换。

以 vue 项目为例，它的本地 url 结构一般为以下格式：

http://localhost:3000/#/user/login
路由地址是在 # 号后面的，也就是利用了锚点的特性。

---

vue框架

为了实现前后端分离的开发理念，开发前端 SPA 项目，实现数据绑定，路由配置，项目编译打包等一系列工作的技术框架。

围绕 vue.js 配套的一系列的工具（包含了一整套外围工具的完整系统）：

• vue.js 核心
• vue-router 实现路由工具
• webpack 项目打包以及编译工具
• nodejs 前端开发环境
• npm 前端包管理器
• axios ajax 接口请求工具
• sass-loader 和 node-sass css 预处理
• element-ui 基于 vue 的组件库
• vue-cli vue 项目脚手架（一键安装 vue 全家桶的工具）

---

安装nodejs、vue-cli等环境

安装nodejs环境

1. 安装nodejs环境，因为vue依赖nodejs环境

nodejs 官方网站下载安装包： https://nodejs.org/

2. 安装完成后，打开终端检查是否安装成功

注意：新版本的nodejs内置npm，不需要独立安装。

查看npm是否已经安装：npm —version

查看node版本号，如果正确显示版本号，则安装成功

---

安装 vue-cli 脚手架工具

1. 在终端输入：
   npm install vue-cli -g 或 cnpm install vue-cli -g

最好安装cnpm淘宝镜像源：npm install cnpm -g
原因：安装需要联网，如果npm被墙，可以使用cnpm安装；使用cnpm的安装速度更快

• npm 是 nodejs 内置的官方包管理器。简单的理解为，可以用来管理所有的依赖包。
• install 命令表示执行安装操作（uninstall、update等）。
• vue-cli 是我们要安装的包。
• -g 是命令参数，代表这个包将安装为系统全局的包。

2. 安装完成后在终端输入命令行查询相关信息：

3. 环境搭建好之后，就可以开始创建项目

---

用 vue-cli 构建一个项目

1. 创建项目文件夹，打开文件夹后，按shift+鼠标右键，选择‘在此处打开PowerShell窗口’，在终端输入：
   vue init webpack myproject

• vue 安装的vue-cli脚手架的命令
• init 初始化一个以webpack为模版、名字叫myproject的项目

安装过程出现的提示信息：

1. Project name (my-vue-project) --项目名称，如果不想改，直接回车
2. Project description(A Vue.js project) --项目描述，如果不想改，直接回车
3. Author (24439…) --项目作者，如果不想改，直接回车
   
   
4. Vue build (Use arrow keys) --是否需要安装编译器，我们选择安装，直接回车
5. Install vue-router (Y/n) --是否需要安装vue-router路由管理，我们选择安装，直接回车
6. Use ESLint to lint your code? (Y/n) --安装eslint检查语法，我选择不安装，按n，再按回车（如果安装，按回车）
7. Setup unit tests? (Y/n) --安装单元测试，我选择不安装，按n，再按回车
8. Setup e2e tests with Nightwatch? (Y/n) --还是关于测试，我选择不安装，按n，再按回车
9. 选择使用npm

2. 安装过程需要联网，等待安装
3. 项目构建完成

4. 按照提示，需要先进到myproject cd myproject + 回车；
   为了保证项目中的依赖是完整的，需要先执行：cnpm install；
   运行项目：cnpm run dev + 回车。

5. 项目启动成功
   如果是手动启动项目，可以在浏览器输入：http://localhost:8080访问；
   如果想让浏览器自动打开，可以在build目录下的index.js文件中修改autoOpenBrowser: true,成true，重新运行就可以自动打开浏览器了。
   
   

---

项目文件介绍

项目初始文件介绍

├── node_modules                    # 项目依赖包文件夹
├── build                           # 编译配置文件，一般不用管
│   ├── build.js
│   ├── check-versions.js
│   ├── logo.png
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config                           # 项目基本设置文件夹
│   ├── dev.env.js                   # 开发配置文件
│   ├── index.js                     # 配置主文件
│   └── prod.env.js                  # 编译配置文件
├── src                              # 项目源码编写文件
│   ├── App.vue                      # APP入口文件
│   ├── assets                       # 初始项目资源目录，删除
│   │   └── logo.png
│   ├── components                   # 组件目录
│   │   └── Hello.vue                # 测试组件，删除
│   ├── main.js                      # 主配置文件
│   └── router                       # 路由配置文件夹
│       └── index.js                 # 路由配置文件
└── static                           # 资源放置目录
├── index.html                       # 项目入口html模板
├── package.json                     # 项目依赖包配置文件
├── .babelrc                         # babel 配置
├── .postcssrc.js                    # postcss 配置
├── .editorconfig                    # editor 配置
└── README.md                        # 项目说明文档

实际开发的时候，主要操作 src 里面的文件，但需要我们重新整理里面的文件；static 资源目录，也需要根据放置不同的资源构建不同的子文件夹。

---

配置src和static目录

配置 src 目录，也可以根据自己的实际需求配置目录：

├── api                           // 接口调用工具文件夹
│   └── index.js
├── components                    // 组件文件夹
│    ├── header.vue
│    └── footer.vue
├── page                          // 页面文件夹
│   ├── content.vue               // 内容页面
│   └── index.vue                 // 首页列表
├── router                        // 路由配置文件夹
│   └── index.js
├── store                         // vuex状态管理目录
├── style                         // scss 样式存放目录
│   └── style.scss                // 主样式文件，可以按分类创建多个文件夹
└── utils                         // 常用工具文件夹
│   └── index.js
├── App.vue                       // APP入口文件
└── main.js                       // 项目配置文件

.vue 文件，是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。

每个 .vue文件包含三种类型的顶级语言块