©2020-2024 ioDraw All rights reserved,
Privacy Policy
<>《Vue.js项目开发实战》学习笔记
* MVC,MVP和MVVM都是常见的软件架构设计模式。
* SPA是一种架构理念，单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。
*
Restful作为一种软件架构风格，是设计风格而不是标准，只是提供了一组设计原则和约束条件，它主要用于客户端和服务器交互的软件。基于这个风格设计出的软件可以更简洁，更有层次，更容易实现缓存机制。
* 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 命令。
<>项目创建步骤：
* 打开命令行，输入：Vue init webpack projectName
（命令行中会让你对设置一些项目选择，按如下）
* 进入新建项目文件夹里 打开命令行 输入 npm install
* 输入命令行，运行项目代码npm run dev
* 安装网络请求模块 npm install vue-resource -save
* 并在routers\index.js中通过下面的代码引入和注册该组件：
Import VueResource from ‘vue-resource’ Vue.use(VueResource)
到此，就简单构建出一个Vue项目，下面对项目中部分相关知识进行详细解说。
<>二．项目文件说明：
* main.js是我们的入口文件，主要作用是初始化vue实例并使用需要的插件
* App.vue是外面的主组件，所有页面都是在App.vue下进行切换。其实你也可以理解为所有的路由也是App.vue的子组件。
vue cli在开发环境下的工程的运行原理：
main.js是项目的入口文件，定义了vue实例，并引入根组件app.vue，将其挂载到index.html中id为‘app’的节点上
<>三．项目页面和组件编写相关知识：
（在哪些文件里写页面代码，哪些写公用组件代码，以及如何使它们联系在一起等）
以一个项目分析
*
这是一个vue项目的目录：
（说明：其中src目录下，pages文件夹下放着页面文件，components文件夹下放着页面文件的子组件，router文件夹下放着路由文件）
*
下面看router中的路由文件index.js
①先看开头：
（说明：在开头通过import加入pages文件夹里写好的各页面组件文件, router里只引入页面文件，不引入页面文件的子组件）
②再看部分routes数组里的内容，
（
说明：其中各对象元素的path值为访问页面时在用户浏览器url框里后面的字符串，component值为与上面加入页面组件文件时import后对应的名，不是页面用到的子组件。用来指定用户访问某个url时访问的是相应的页面。
）
*
再看pages文件夹里的某个页面文件：（如sendEmail.vue文件）部分代码如下：
①先看html代码：
（说明：通过使用子组件，通过 :A=“B”来给子组件传递数据，其中A是子组件中props 声明的数据，而B是在pages中data函数里返回的数据并用。）
②再看script代码中：
（说明：通过import引入页面中要使用的子组件）
③再看export default {}：
（说明：在components中，说明要用到的子组件，值就是上面import引入时后面的名称。）
④另外在created（）函数中的方法是用来向服务器获取数据:
*
最后看上面说到的页面文件sendEmail中用到的一个子组件：（以子组件EmailList.vue为例）
（说明：子组件在export default中在props数组中声明从父组件那传递来的数据，并v-bind赋值给相关的属性或者直接使用）
<><二>后端
<>一．新建项目：
* npm i -g express
* express book_service
* cd book_service
* npm install
* SET DEBUG=book-service:* & npm start
<>二．一些好用的工具：
* 一个测试HTTP请求的Postman插件
* 使用Supervisor监控代码的修改
* 安装：npm install -g supervisor
* 启动：supervisor bin/www
<>三．项目结构相关说明
1.项目结构：
（说明：routers文件夹下是本项目的全部代码和路由内容，public文件夹下是本项目相关的静态资源）
<>其他. 一些坑：
1.使用ivew报错：iView is not defined
错因：全局引用和局部引入是不能同时使用的
正确步骤：
* 安装 npm install iview --save
* 在 webpack 入口页面 main.js 中加入如下配置： （全局引用）
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);
或者 ：（下面是按需引用）
借助插件 babel-plugin-import可以实现按需加载组件，减少文件体积。
* 首先安装 npm install babel-plugin-import --save-dev
* 并在文件 .babelrc 中配置：
{ "plugins": [["import", { "libraryName": "iview", "libraryDirectory":
"src/components" }]] }
* 在webpack 入口页面 main.js 中加入如下配置：
import { Button, Table } from 'iview'; Vue.component('Button', Button);
Vue.component('Table', Table);