《Vue.js项目开发实战》学习笔记

1. MVC,MVP和MVVM都是常见的软件架构设计模式。
2. SPA是一种架构理念，单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。
3. Restful作为一种软件架构风格，是设计风格而不是标准，只是提供了一组设计原则和约束条件，它主要用于客户端和服务器交互的软件。基于这个风格设计出的软件可以更简洁，更有层次，更容易实现缓存机制。
4. Vue.js+vue-router 的形式创建单页面是非常简单的，使用Vue.js，可以通过组合组件来构建应用程序，当开发者将vue-router添加就来后，需要做的就是将组件映射到路由，然后告诉vue-router在哪里渲染它们。

<一>前端

一．通过CLI快速构建应用

相关概念：

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

• 通过 @vue/cli 搭建交互式的项目脚手架。
• 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
• 一个运行时依赖 (@vue/cli-service)，该依赖：
  • 可升级；
  • 基于 webpack 构建，并带有合理的默认配置；
  • 可以通过项目内的配置文件进行配置；
  • 可以通过插件进行扩展。
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
  CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。

项目创建步骤：

1. 打开命令行，输入：Vue init webpack projectName
   （命令行中会让你对设置一些项目选择，按如下）
2. 进入新建项目文件夹里 打开命令行 输入 npm install
3. 输入命令行，运行项目代码npm run dev
4. 安装网络请求模块 npm install vue-resource -save
5. 并在routers\index.js中通过下面的代码引入和注册该组件：
   Import VueResource from ‘vue-resource’ Vue.use(VueResource)

到此，就简单构建出一个Vue项目，下面对项目中部分相关知识进行详细解说。

二．项目文件说明：

1. main.js是我们的入口文件，主要作用是初始化vue实例并使用需要的插件
2. App.vue是外面的主组件，所有页面都是在App.vue下进行切换。其实你也可以理解为所有的路由也是App.vue的子组件。
   
   vue cli在开发环境下的工程的运行原理：
   main.js是项目的入口文件，定义了vue实例，并引入根组件app.vue，将其挂载到index.html中id为‘app’的节点上

三．项目页面和组件编写相关知识：

（在哪些文件里写页面代码，哪些写公用组件代码，以及如何使它们联系在一起等）
以一个项目分析

1. 这是一个vue项目的目录：
   
   （说明：其中src目录下，pages文件夹下放着页面文件，components文件夹下放着页面文件的子组件，router文件夹下放着路由文件）

2. 下面看router中的路由文件index.js
   ①先看开头：
   
   （说明：在开头通过import加入pages文件夹里写好的各页面组件文件, router里只引入页面文件，不引入页面文件的子组件）

   ②再看部分routes数组里的内容，
   
   
   （说明：其中各对象元素的path值为访问页面时在用户浏览器url框里后面的字符串，component值为与上面加入页面组件文件时import后对应的名，不是页面用到的子组件。用来指定用户访问某个url时访问的是相应的页面。）

3. 再看pages文件夹里的某个页面文件：（如sendEmail.vue文件）部分代码如下：
   ①先看html代码：
   
   （说明：通过使用子组件，通过 :A=“B”来给子组件传递数据，其中A是子组件中props 声明的数据，而B是在pages中data函数里返回的数据并用。）

   ②再看script代码中：
   
   （说明：通过import引入页面中要使用的子组件）

   ③再看export default {}：
   
   （说明：在components中，说明要用到的子组件，值就是上面import引入时后面的名称。）

   ④另外在created（）函数中的方法是用来向服务器获取数据:
   

4. 最后看上面说到的页面文件sendEmail中用到的一个子组件：（以子组件EmailList.vue为例）
   
   （说明：子组件在export default中在props数组中声明从父组件那传递来的数据，并v-bind赋值给相关的属性或者直接使用）

<二>后端

一．新建项目：

1. npm i -g express
2. express book_service
3. cd book_service
4. npm install
5. SET DEBUG=book-service:* & npm start

二．一些好用的工具：

1. 一个测试HTTP请求的Postman插件
2. 使用Supervisor监控代码的修改
3. 安装：npm install -g supervisor
4. 启动：supervisor bin/www

三．项目结构相关说明

1.项目结构：

（说明：routers文件夹下是本项目的全部代码和路由内容，public文件夹下是本项目相关的静态资源）

其他. 一些坑：

1.使用ivew报错：iView is not defined
错因：全局引用和局部引入是不能同时使用的
正确步骤：

1. 安装 npm install iview --save
2. 在 webpack 入口页面 main.js 中加入如下配置： （全局引用）
   import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);

或者 ：（下面是按需引用）
借助插件 babel-plugin-import可以实现按需加载组件，减少文件体积。

1. 首先安装 npm install babel-plugin-import --save-dev
2. 并在文件 .babelrc 中配置：
   { "plugins": [["import", { "libraryName": "iview", "libraryDirectory": "src/components" }]] }
3. 在webpack 入口页面 main.js 中加入如下配置：
   import { Button, Table } from 'iview'; Vue.component('Button', Button); Vue.component('Table', Table);