add files:vue

2018-03-04 18:18:19 +08:00
parent a34fd4c6e1
commit ed4b45f820
20 changed files with 1662 additions and 341 deletions
--- a/12-Vue框架/01-Vue的介绍和环境配置.md
+++ b/12-Vue框架/01-Vue的介绍和环境配置.md
@@ -0,0 +1,371 @@
+
+
+## 前端的各种框架
+
+### Vue、React、AngularJS
+
+AngularJS 提供更多的是一套解决方案，更像是一个生态。
+
+ Vue 和 React目前都是用了 Virtual Dom。
+
+### Vue 和 React 的对比
+
+20180302_1623.png
+
+
+### Vue 和 React 的相同点
+
+20180302_1636.png
+
+国内的很多开发者喜欢 Vue；国外的开发者更喜欢 React，可以做大型网站。
+
+### 什么是虚拟 DOM
+
+传统的web开发，是利用 jQuery操作DOM，这是非常耗资源的。
+
+我们可以在 JS 的内存里构建类似于DOM的对象，去拼装数据，拼装完整后，把数据整体解析，一次性插入到html里去。这就形成了虚拟 DOM。
+
+
+Vue1.0没有虚拟DOM，Vue2.0改成了基于虚拟DOM。
+
+
+### 前端框架回顾
+
+20180302_1645.png
+
+
+20180302_1651.png
+
+
+20180302_1652.png
+
+
+
+Vue框架中，没有控制器。
+
+
+## Vue 框架
+
+### 发展历史
+
+20180302_1655.png
+
+2016.10发布2.0版本。
+
+### 相关网址
+
+- [中文官网](https://cn.vuejs.org/)
+
+- GitHub地址：<https://github.com/vuejs/vue>
+
+- [vuejs官方论坛](https://forum.vuejs.org/)
+
+
+
+
+20180302_1658.png
+
+上方截图的时间：2018-03-02。
+
+
+
+### 介绍
+
+ Vue 本身并不是一个框架，Vue结合周边生态构成一个灵活的、渐进式的框架。
+
+渐进式框架图：
+
+
+20180302_1701.png
+
+
+- 声明式渲染：当我们在页面里，通过 new 一个 view 的事例时，
+
+
+### Vue 的特点
+
+- 模板渲染
+
+- 组件化/模块化
+
+- 扩展功能：路由、ajax、数据流等。
+
+20180302_1750.png
+
+20180302_1751.png
+
+20180302_1752.png
+
+20180302_1753.png
+
+## Vue 的环境搭建
+
+> 我们首先要安装好 NVM、Node.js环境，然后再来做下面的操作。
+
+### 常见的插件
+
+- Webpack：代码模块化构建打包工具。
+
+- Gulp：基于流的自动化构建工具。
+
+- Grunt ：JS 世界的构建工具。
+
+- Babel：使用最新的 规范来编写 js。
+
+- Vue：构建数据驱动的Web界面的渐进式框架
+
+- Express：基于 Node.js 平台，快速、开放、极简的 Web 开发框架。
+
+以上这些包，都可以通过 NPM 这个包管理工具来安装。
+
+### 引用 Vue.js 文件
+
+1、**方式一**：（引用的方式）
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
+</head>
+<body>
+
+
+</body>
+</html>
+```
+
+
+2、方式二：（下载 vue.js 文件）
+
+去网站<https://cdn.jsdelivr.net/npm/vue/>下载 vue.js 文件，直接放到工程文件里，然后引用。
+
+3、方式三：（npm安装vue）
+
+```bash
+# 最新稳定版
+$ npm install vue
+```
+
+如果网络不稳定，可以采用下面的方式安装：
+
+```
+$ cnpm i vue --save
+```
+
+我们可以看到 vue.js 的安装目录：
+
+20180302_2252.png
+
+20180302_2255.png
+
+此时在 src 中需要引入的路径是：
+
+
+20180302_2106.png
+
+上图中的引入方式，不是很理解。
+
+### 安装 vue-cli（命令行工具）
+
+Vue 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。
+
+安装命令如下：
+
+```bash
+# 全局安装 vue-cli
+$ npm install -g vue-cli
+```
+
+以下代码来自官网，仅供阅读：
+
+```
+# 创建一个基于 webpack 模板的简单的新项目【荐】
+$ vue init webpack-simple demo01
+
+# 创建一个基于 webpack 模板的完整的新项目
+$ vue init webpack demo02
+
+
+# 安装依赖，走你
+$ cd my-project
+$ npm install
+$ npm run dev
+```
+
+## 利用 vue-cli 新建一个空的项目
+
+### 构建一个 simple 项目
+
+我们利用 vue-cli 来构建一个 SPA 应用：
+
+（1）首先执行：
+
+```
+$ vue init webpack-simple VueDemo01
+
+```
+
+然后根据提示输入 project name（要求小写），description 默认即可：
+
+
+20180303_0850.png
+
+
+上方截图中，`npm install `指的是下载各种依赖包，`npm run dev`指的是打开发包，`npm run build`指的是打生产包。
+
+我们可以看到这个项目的结构：
+
+20180303_0851.png
+
+- src：项目源码
+
+- .babelrc：ES6编译插件的配置
+
+- index.html：单页面的入口
+
+
+（2）Mac环境，安装各种依赖包，执行如下命令：
+
+```
+cd /Users/smyhvae/Dropbox/workspace/Mac/VueDemo01
+
+cnpm install
+```
+
+备注：我们在 GitHub上下载的任何Vue有关的项目，第一步都是要首先执行 cnpm install。
+
+
+（3）让项目跑起来：
+
+```
+cnpm run dev
+```
+
+这个空的项目就可以在浏览器上跑起来：
+
+
+20180303_0853.png
+
+如果是在webstorm中开发这个项目，会有点卡，因为依赖的包比较多，重启软件即可。
+
+### 构建一个 非 simple 项目
+
+
+（1）构建一个空的项目，首先执行：
+
+```
+$ vue init webpack VueDemo02
+
+```
+
+然后根据提示依次输入：
+
+-  project name：要求小写。
+
+- description：默认即可。
+
+- vue-router：需要。
+
+- ESlint：语法检查，初学者暂时不需要。
+
+- 单元测试：暂时也不需要。
+
+- e2e test：不需要。
+
+
+
+（2）Mac环境，安装各种依赖包，执行如下命令：
+
+```
+cd /Users/smyhvae/Dropbox/workspace/Mac/VueDemo02
+
+cnpm install
+```
+
+备注：我们在 GitHub上下载的任何Vue有关的项目并没有包含 `node_modules`，第一步都是要首先执行 cnpm install，把 `node_modules`里的包下载下来。我们发给同事的工程文件，建议也不要包含 `node_modules`。
+
+
+
+（3）让项目跑起来：
+
+```
+cnpm run dev
+```
+
+这个空的项目就可以在浏览器上跑起来。
+
+20180303_0911.png
+
+20180303_0913.png
+
+
+
+## vue 项目结构分析
+
+20180303_1010.png
+
+- buid：打包配置的文件夹
+
+- config：webpack对应的配置
+
+- src：开发项目的源码
+	- App.vue：入口组件。`.vue`文件都是组件。
+	- main.js：项目入口文件。
+
+- static：存放静态资源
+
+- `.babelrc`：解析ES6的配置文件
+
+- `.editorcofnig`：编辑器的配置
+
+- `.postcssrc.js`：html添加前缀的配置
+
+- `index.html`：单页面的入口。通过 webpack打包后，会把 src 源码进行编译，插入到这个 html 里面来。
+
+
+- `package.json`：项目的基础配置，包含版本号、脚本命令、项目依赖库、开发依赖库、引擎等。
+
+
+
+
+
+
+### 图片的base64编码
+
+默认是10k以下，建议都通过 base64编码。在配置文件`webpack.base.conf.js`中进行修改：
+
+```
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+```
+
+## Vue 基础语法
+
+20180303_1130.png
+
+20180303_1135.png
+
+20180303_1145.png
+
+20180303_1146.png
+
+20180303_1150.png
+
+
+
+
+
+
+
+
+
+
+
--- a/12-Vue框架/02-Vue-router.md
+++ b/12-Vue框架/02-Vue-router.md
@@ -0,0 +1,45 @@
+
+## 路由的概念
+
+
+### 前端路由
+
+路由：根据不同的 url 地址展示不同的内容或页面。
+
+前端路由：把不同路由对应不同的内容（页面）的任务交给前端来做。以前是通过服务器端根据url的不同返回不同页面来实现的。
+
+
+什么时候使用前端路由：在单页面应用中，大部分页面结构不变，只改变部分内容的使用。
+
+
+### 前端路由的优点和缺点
+
+
+优点：
+
+- 用户体验好，不需要每次都从服务器全部获取，快速展现给用户。
+
+缺点：
+
+- 不利于 SEO。
+
+- 使用浏览器的前进、后退键时，会重新发送请求，没有合理利用缓存。
+
+- 单页面无法记住之前滚动的位置，无法在前进、后退时记住滚动的位置。
+
+
+## vue-router 构建 SPA
+
+### 动态路由
+
+20180303_1335.png
+
+
+
+## axios
+
+尤雨溪之前发微博说， vue-resource 不再是官方推荐的插件，推荐使用 `axios`。
+
+
+
+
--- a/12-Vue框架/02-Vue基础知识.md
+++ b/12-Vue框架/02-Vue基础知识.md
@@ -0,0 +1,15 @@
+
+
+## 基础知识介绍
+
+Vue 的基础知识包括：
+
+20180303_1237.png
+
+20180303_1238.png
+
+
+实例 --> 组件 --> 指令 --> 选项 --> 模板渲染 --> 事件绑定 --> 计算属性 --> 内置动画 --> 组件交互 --> 路由等。
+
+
+## 实例对象
--- a/12-Vue框架/02-商城系统.md
+++ b/12-Vue框架/02-商城系统.md
@@ -0,0 +1,56 @@
+02-商城系统.md
+
+## 商城系统介绍
+
+### 商城系统包含的模块
+
+- 商品列表
+
+- 购物车
+
+- 地址
+
+- 结算
+
+- 订单
+
+- 登录等
+
+
+### 技术栈
+
+前端使用：Vue 全家桶以及 ES6。
+
+后端使用：Express 框架、DB 使用 Mongo。
+
+### 项目整体架构
+
+20180302_1850.png
+
+
+### 课程安排
+
+
+20180302_1851.png
+
+20180302_1852.png
+
+
+### 项目地址
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+