构建vue实战项目

目录

  • 基础知识
      • 前后端分离
      • 页面的 url 构成
      • vue框架
  • 安装nodejs、vue-cli等环境
      • 安装nodejs环境
      • 安装 vue-cli 脚手架工具
      • 用 vue-cli 构建一个项目
  • 项目文件介绍
      • 项目初始文件介绍
      • 配置src和static目录
  • 修改 App.vue、router和page 文件
      • 修改 App.vue 文件
      • 修改router/index.js文件
      • 添加 index.vue 和 content.vue 文件
  • 配置 axios api 接口
      • 安装axios
      • 调整 main.js 文件
      • 调整src/index.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/

  1. 安装完成后,打开终端检查是否安装成功

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

查看npm是否已经安装:npm —version
在这里插入图片描述
查看node版本号,如果正确显示版本号,则安装成功
在这里插入图片描述


安装 vue-cli 脚手架工具

  1. 在终端输入:
    npm install vue-cli -gcnpm install vue-cli -g

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

  • npm 是 nodejs 内置的官方包管理器。简单的理解为,可以用来管理所有的依赖包。
  • install 命令表示执行安装操作(uninstall、update等)。
  • vue-cli 是我们要安装的包。
  • -g 是命令参数,代表这个包将安装为系统全局的包。
  1. 安装完成后在终端输入命令行查询相关信息:

在这里插入图片描述
构建vue实战项目_第1张图片
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

构建vue实战项目_第2张图片

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

构建vue实战项目_第3张图片
构建vue实战项目_第4张图片

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

构建vue实战项目_第5张图片

  1. 项目启动成功
    如果是手动启动项目,可以在浏览器输入:http://localhost:8080访问;
    如果想让浏览器自动打开,可以在build目录下的index.js文件中修改autoOpenBrowser: true,成true,重新运行就可以自动打开浏览器了。
    构建vue实战项目_第6张图片
    构建vue实战项目_第7张图片

项目文件介绍

项目初始文件介绍

├── 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文件包含三种类型的顶级语言块