<>《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);

技术
©2020 ioDraw All rights reserved
python简单小游戏代码-10分钟用Python编写一个贪吃蛇小游戏,简单干货|单片机的指针怎么学?韦恩图解决数学问题STM32L系列与普通STM32F系列的比较伪造ACK实现TCP数据注入python装饰器的简单理解TCP/IP协议竟然有这么多漏洞?Python基于Django学生教务选课系统设计python生成随机字符串方法-random模块面试简历上的项目经验