Web/21-Vue基础/00-Vue的介绍和环境配置.md

391 lines
7.9 KiB
Markdown
Raw Normal View History

2018-03-04 18:18:19 +08:00
2018-03-09 17:27:01 +08:00
- [Get全栈技能点 Vue2.0/Node.js/MongoDB 打造商城系统](https://coding.imooc.com/class/chapter/113.html)
2018-03-13 23:12:27 +08:00
## MVVM模式
- Model负责数据存储
- View负责页面展示
- View Model负责业务逻辑处理比如Ajax请求等对数据进行加工后交给视图展示
2018-03-04 18:18:19 +08:00
## 前端的各种框架
### Vue、React、AngularJS
AngularJS 提供更多的是一套解决方案,更像是一个生态。
Vue 和 React目前都是用了 Virtual Dom。
### Vue 和 React 的对比
2018-03-09 17:27:01 +08:00
![](http://img.smyhvae.com/20180302_1623.png)
2018-03-04 18:18:19 +08:00
### Vue 和 React 的相同点
2018-03-09 17:27:01 +08:00
![](http://img.smyhvae.com/20180302_1636.png)
2018-03-04 18:18:19 +08:00
国内的很多开发者喜欢 Vue国外的开发者更喜欢 React可以做大型网站。
### 什么是虚拟 DOM
传统的web开发是利用 jQuery操作DOM这是非常耗资源的。
我们可以在 JS 的内存里构建类似于DOM的对象去拼装数据拼装完整后把数据整体解析一次性插入到html里去。这就形成了虚拟 DOM。
Vue1.0没有虚拟DOMVue2.0改成了基于虚拟DOM。
### 前端框架回顾
2018-03-09 17:27:01 +08:00
![](http://img.smyhvae.com/20180302_1645.png)
2018-03-04 18:18:19 +08:00
2018-03-09 17:27:01 +08:00
![](http://img.smyhvae.com/20180302_1651.png)
2018-03-04 18:18:19 +08:00
2018-03-09 17:27:01 +08:00
![](http://img.smyhvae.com/20180302_1652.png)
2018-03-04 18:18:19 +08:00
Vue框架中没有控制器。
## Vue 框架
### 发展历史
2018-03-09 17:27:01 +08:00
![](http://img.smyhvae.com/20180302_1655.png)
2018-03-04 18:18:19 +08:00
2016.10发布2.0版本。
### 相关网址
- [中文官网](https://cn.vuejs.org/)
- [vuejs官方论坛](https://forum.vuejs.org/)
2018-03-13 23:12:27 +08:00
- GitHub地址<https://github.com/vuejs/vue>
- Vue1.0 在线文档:<http://v1-cn.vuejs.org/guide/>
- Vue2.x 在线文档:<https://cn.vuejs.org/v2/guide/>
- Vue1下载地址http://v1-cn.vuejs.org/js/vue.js
- Vue2下载地址https://unpkg.com/vue@2.2.1/dist/vue.js
2018-03-04 18:18:19 +08:00
2018-03-09 17:27:01 +08:00
![](http://img.smyhvae.com/20180302_1658.png)
2018-03-04 18:18:19 +08:00
上方截图的时间2018-03-02。
### 介绍
Vue 本身并不是一个框架Vue结合周边生态构成一个灵活的、渐进式的框架。
渐进式框架图:
2018-03-09 17:27:01 +08:00
![](http://img.smyhvae.com/20180302_1701.png)
2018-03-04 18:18:19 +08:00
- 声明式渲染:当我们在页面里,通过 new 一个 view 的事例时,
### Vue 的特点
- 模板渲染
- 组件化/模块化
- 扩展功能路由、ajax、数据流等。
2018-03-09 17:27:01 +08:00
![](http://img.smyhvae.com/20180302_1750.png)
2018-03-04 18:18:19 +08:00
2018-03-09 17:27:01 +08:00
![](http://img.smyhvae.com/20180302_1751.png)
2018-03-04 18:18:19 +08:00
2018-03-09 17:27:01 +08:00
![](http://img.smyhvae.com/20180302_1752.png)
2018-03-04 18:18:19 +08:00
2018-03-09 17:27:01 +08:00
![](http://img.smyhvae.com/20180302_1753.png)
2018-03-04 18:18:19 +08:00
## 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 的安装目录:
2018-03-09 17:27:01 +08:00
![](http://img.smyhvae.com/20180302_2252.png)
2018-03-04 18:18:19 +08:00
2018-03-09 17:27:01 +08:00
![](http://img.smyhvae.com/20180302_2255.png)
2018-03-04 18:18:19 +08:00
此时在 src 中需要引入的路径是:
2018-03-09 17:27:01 +08:00
![](http://img.smyhvae.com/20180302_2106.png)
2018-03-04 18:18:19 +08:00
上图中的引入方式,不是很理解。
### 安装 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
```
2018-03-09 17:27:01 +08:00
然后根据提示输入 project name**要求小写**description 默认即可:
2018-03-04 18:18:19 +08:00
2018-03-09 17:27:01 +08:00
![](http://img.smyhvae.com/20180303_0850.png)
2018-03-04 18:18:19 +08:00
上方截图中,`npm install `指的是下载各种依赖包,`npm run dev`指的是打开发包,`npm run build`指的是打生产包。
我们可以看到这个项目的结构:
2018-03-09 17:27:01 +08:00
![](http://img.smyhvae.com/20180303_0851.png)
2018-03-04 18:18:19 +08:00
- src项目源码
- .babelrcES6编译插件的配置
- index.html单页面的入口
2Mac环境安装各种依赖包执行如下命令
```
cd /Users/smyhvae/Dropbox/workspace/Mac/VueDemo01
cnpm install
```
备注:我们在 GitHub上下载的任何Vue有关的项目第一步都是要首先执行 cnpm install。
3让项目跑起来
```
cnpm run dev
```
这个空的项目就可以在浏览器上跑起来:
2018-03-09 17:27:01 +08:00
![](http://img.smyhvae.com/20180303_0853.png)
2018-03-04 18:18:19 +08:00
如果是在webstorm中开发这个项目会有点卡因为依赖的包比较多重启软件即可。
### 构建一个 非 simple 项目
1构建一个空的项目首先执行
```
$ vue init webpack VueDemo02
```
然后根据提示依次输入:
2018-03-09 17:27:01 +08:00
- project name**要求小写**。
2018-03-04 18:18:19 +08:00
- description默认即可。
- vue-router需要。
2018-03-09 17:27:01 +08:00
- ESlint语法检查初学者可以暂时不需要。
2018-03-04 18:18:19 +08:00
- 单元测试:暂时也不需要。
- e2e test不需要。
2Mac环境安装各种依赖包执行如下命令
```
cd /Users/smyhvae/Dropbox/workspace/Mac/VueDemo02
cnpm install
```
备注:我们在 GitHub上下载的任何Vue有关的项目并没有包含 `node_modules`,第一步都是要首先执行 cnpm install`node_modules`里的包下载下来。我们发给同事的工程文件,建议也不要包含 `node_modules`
3让项目跑起来
```
cnpm run dev
```
这个空的项目就可以在浏览器上跑起来。
2018-03-09 17:27:01 +08:00
![](http://img.smyhvae.com/20180303_0915.png)
2018-03-04 18:18:19 +08:00
2018-03-09 17:27:01 +08:00
![](http://img.smyhvae.com/20180303_0913.png)
2018-03-04 18:18:19 +08:00
## vue 项目结构分析
2018-03-09 17:27:01 +08:00
![](http://img.smyhvae.com/20180303_1010.png)
2018-03-04 18:18:19 +08:00
- buid打包配置的文件夹
- configwebpack对应的配置
- 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 基础语法
2018-03-09 17:27:01 +08:00
![](http://img.smyhvae.com/20180303_1130.png)
2018-03-04 18:18:19 +08:00
2018-03-09 17:27:01 +08:00
![](http://img.smyhvae.com/20180303_1135.png)
2018-03-04 18:18:19 +08:00
2018-03-09 17:27:01 +08:00
![](http://img.smyhvae.com/20180303_1145.png)
2018-03-04 18:18:19 +08:00
2018-03-09 17:27:01 +08:00
![](http://img.smyhvae.com/20180303_1146.png)
2018-03-04 18:18:19 +08:00
2018-03-09 17:27:01 +08:00
![](http://img.smyhvae.com/20180303_1150.png)
2018-03-04 18:18:19 +08:00