假装是个熟手的新手

Vue 学习

技术栈

• Vue.JS （Vuex 状态管理 、 VueRouter 路由管理 、 Vue-Cli webpack脚手架 、Vue 服务端渲染）
• ES6 语法
• Node.js （NPM 使用引入三方包）
• WebPack 打包工具

推荐工具

• VSCode 编辑器
• ESLint (VS 插件)代码格式规范
• Beauty (VS 插件)代码格式规范
• Git 版本管理

三大框架对比

• React star 97554
• Vue star 96626
• Angular star 36885

Vue的优势

模板或渲染的灵活选项
语法以及项目设置的简单
渲染速度更快，体积更小

React的优势

更大的规模、更多的使用者、更好的可测试性
Web和原生APP
能提供更多支持和工具的更大的生态系统

共同点：

使用虚拟DOM快速渲染
轻量级
响应式组件
服务端渲染
轻松集成的的路由、捆绑和状态管理
强大的支持和社区

框架思想

• 易用
  已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
• 灵活
  不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
• 高效
  20kB min+gzip 运行大小 超快虚拟 DOM 最省心的优化

主要语法 （只介绍Vue.js的语法）

• v-if
• v-show
• v-bind
• v-on
• v-for
• v-html
• 更多 ...

生态

良好的生态系统，更多的中文支持和帮助方案
更丰富的工具

开始进入Vue

准备工作

• 安装node js 环境

  • 安装nodejs v 10.3.0 | 官网地址 | 64位下载链接
    --检查是否安装完成 进入cmd 控制台 node -v npm -v
  • 已有nodejs 和 npm 如何更新

  1.更新npm
       npm install npm@latest -g 
      2.更新 node
      npm cache clean -f    清除缓存
      npm install -g n  安装 n模块管理
      n lastest
      （ps 如果发现n模块无法使用，建议重新下载nodejs 最新版本手动安装）

  • 将npm 指向淘宝镜像
    npm install -g cnpm --registry=https://registry.npm.taobao.org

• 下载 VsCode 下载地址

开始第一个Vue (以下操作均在VSCode中进行)

• 简单引入 尝鲜
  简单了解vuejs特性和一些属性和方法

    v-on 绑定事件  如 v-on:click="DoSth" 简写为 @  
    v-bind  绑定属性  如  v-bind:class="{Select:isSelected}" 
    v-text 渲染数据
    v-html 渲染Html
    v-if  控制显示
    v-show 
    v-For 循环  类似  foreach 
    data  数据
    props 属性
    propsData 
    computed
    methods  方法
    watch  监视  监视 data 里被定义的值的改变 接收 val .oldval

了解了基本原理之后，但我们好像发现一些问题
这不是我们想要的vue？
刚才我们只是给一些普通的html标签增加一些新特性而已，感觉这    个和真正的vue还是很大区别。
a.这个后缀不对啊，应该是.vue 结尾的啊
b.直接双击html就能看到网页，这是真的vue么？

所以 vue 的准备工作远远不止这些

怎么识别vue文件的？
Vue-Loader到底做了什么
神奇的Vue-Cli github 地址

• 使用Vue-cli 开始真正的Vue

  • 安装Vue-cli 脚手架工具 （目前版本到 V3.0 和 V2.0很大不同，更简单，也更疑惑）
    npm install -g @vue/cli

  • 通过vue-cli 初始化一个官方的示例
    vue create my-project

  • 运行实例
    进入到目录 运行
    cnpm run server

  • 踩坑

    遇到错误：unable to verify the first certificate
    解决办法：修改npm 镜像源 （推荐使用 nrm 开源工具）
    遇到错误 在 create my-project 时候 选择完 default后不再继续
    解决办法：使用 vue create -d my-project
    https://github.com/vuejs/vue-cli/issues/1444
    一道无形的墙

• 引入三方库

  • Vue-Route
    
    • 介绍
    • 安装 npm install vue-router
    • 使用
  • Vuex
    
    • 介绍
    • 安装 npm install vuex --save
    • 使用
  • Element-UI
    
    • 安装 cnpm i element-ui -S
    • 使用

• 完整前端框架搭建
  使用 vue-element-admin 为例

Vue-Cli 脚手架工具的一些坑（3.0 和 2.0 太不同

自动生成的 vue-project 自定义配置文件，需要自己新建
关于自定义配置，总共需要新建3个文件，修改到1个文件

- 1.自定义配置： 在根目录新增 `[vue.config.js][17]` 文件
- 2.开发模式下配置：根目录新增 `.env.development` 文件
- 3.发布模式下配置：根目录新增 `.env.production` 文件

PS： .env.xx 模式配置文件 里面配置键值对就行了
但要注意 这里必须以VUE_APP开头
这样我们就可以自定义个全局变量在某个模式下
VUE_APP_BASE_URL = 'http://test.xx.com/api/'
使用方式：通过 process.env.VUE_APP_BASE_URL

- 4.包管理配置 根目录的  package.json 文件

Babel 可以通过 .babelrc 或 package.json 中的 babel 字段进行配置。
ESLint 可以通过 .eslintrc 或 package.json 文件中的 eslintConfig 字段进行配置。

ES6 相关 ES6 就是 ES 2015

ES6 新特性

• 增加let 和 const 来定义 块变量和 常量
• 箭头 => 类似 Lambda 表达式
• 支持类，可以继承
• 字符串模板 可以使用 ${str}
• 解构 ，数组输出 [a,,c]=["aa","bb","cc"] 或者 [x,y]=getVal()

• 增加 Promises

  //创建promise
  var promise = new Promise(function(resolve, reject) {
  // 进行一些异步或耗时操作
  if ( /*如果成功 */ ) {
      resolve("Stuff worked!");
  } else {
      reject(Error("It broke"));
  }
  });
  //绑定处理程序
  promise.then(function(result) {
  //promise成功的话会执行这里
  console.log(result); // "Stuff worked!"
  }, function(err) {
  //promise失败会执行这里
  console.log(err); // Error: "It broke"
  });

  |

• 方法体不需要 使用 function 创建
• 方法 可以使用默认参数 func(name='张三'){ //ToDo...}
• 不定参数 func(...paras) {}
• 扩展参数 func(p1,p2,p3){...},func(...array)
• |
• 增加 for(item of items)

• 增加module

   // point.js
  module "point" {
      export class Point {
          constructor (x, y) {
              public x = x;
              public y = y;
          }
      }
  }
  // myapp.js
  //声明引用的模块
  module point from "/point.js";
  //这里可以看出，尽管声明了引用的模块，还是可以通过指定需要的部分进行导入
  import Point from "point";
  var origin = new Point(0, 0);
  console.log(origin);

• 增加 Map，Set 和 WeakMap，WeakSet
  同时，在进行属性值添加与获取时有专门的get，set 方法
ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型，均可使用 for of

• 增加 Proxies 用来监听对象

  //定义被侦听的目标对象
  var engineer = { name: 'Joe Sixpack', salary: 50 };
  //定义处理程序
  var interceptor = {
    set: function (receiver, property, value) {
      console.log(property, 'is changed to', value);
      receiver[property] = value;
    }
  };
  //创建代理以进行侦听
  engineer = Proxy(engineer, interceptor);
  //做一些改动来触发代理
  engineer.salary = 60;//控制台输出：salary is changed to 60

• Symbols

  Symbol是一种基本类型，像数字，字符串还有布尔一样，它不是一个对象。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的。之后就可以用这个返回值做为对象的键了。Symbol还可以用来创建私有属性，外部无法直接访问由symbol做为键的属性值。
  (function() {
   // 创建symbol
    var key = Symbol("key");
    function MyClass(privateData) {
      this[key] = privateData;
    }
    MyClass.prototype = {
      doStuff: function() {
        ... this[key] ...
      }
    };
  })();
  var c = new MyClass("hello")
  c["key"] === undefined//无法访问该属性，因为是私有的

• 增强的对象字面量
  更像对象间的继承

Webpack

• 什么是Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

附言

参考资料

• Vue js 主页
• Element-UI主页
• panjiacheng-花裤衩的Ele-Admin 框架
  （以上均可在主页前往各自的github地址）

前端为什么选择这条路

• 为什么选择Vue ？
  vue 学习曲线不如其他两个框架陡峭，更快速上手
  vue 的社区 中文内容比较多，而且github热度慢慢超过其他两者

• 为什么选择Element-UI
  (我们只对比Iview 和 Element-UI)
  Element-UI 是由ele 前端团队开发，稳定的开发和bug修复
  Ele 已被 阿里收购，可能有一定的技术引入
  Vue.js 推荐使用 Element-UI
  Element-UI Github Star 27362 Issues 8444 closed 275open
  IView-UI Github Star 15196 Issues 2789 closed 433 open

• 为什么选择 花裤衩不选择 IView-admin
  Iview-admin 虽然是Iview官方版的后台管理示例 但还是背靠Iview
  Ele-Admin 虽然是个人开发 但是 github 比 Iview还多
  vuew-element-admin Github Star 13966 Issues 539 closed 86 open
  iview-admin Github Star 6746 Issues 429 closed 201 open

更多

2.Eslint VSCode 配置

在使用编辑器开发的时候，务必使用EsLint插件来检查代码规范
使用前在VSCode 中增加如下配置

{
         // 以下是按照ESLint格式化代码
         "vetur.format.defaultFormatter.js": "vscode-typescript",
         "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
         "editor.quickSuggestions": {
           "strings": true
         },
         "editor.tabSize": 2,
         "eslint.validate": [
           "javascript",
           "javascriptreact",
           "html",
           "vue",
           {
             "language": "html",
             "autoFix": true
           }
         ],
         // "files.autoSave": "onFocusChange",
         // "vetur.validation.template": false,
         // // 防止格式化代码后单引号变双引号
         // "prettier.singleQuote": true,
         "files.autoSave": "afterDelay",
         "files.autoSaveDelay": 1500,
         // "git.confirmSync": false
         // 配置是否从更新通道接收自动更新。更改后需要重启。
         "update.channel": "none",
         "git.ignoreMissingGitWarning": true,
        "eslint.autoFixOnSave": true,
      "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
          "language": "html",
          "autoFix": true
        },
        {
          "language": "vue",
          "autoFix": true
        }
      ]
    }

git的使用

1.安装 git
2.本地注册git -global 你的用户名和邮箱
3.生成 SSH 命令 ssh-keygen -t rsa -C "1131392397@qq.com"
4.在你想要建立项目的地方新建一个根目录文件夹 如 ProjectFile
5.文件夹内 右键 点击 git Bash Here 打开命令窗口
6.窗口内键入 git init 初始化git
7.键入 git remote add origin git@github.com:ys930126/51jf_vue.git 获取远程版本文件
此时已经完成本地与远程服务器的版本库连接
git 常用操作
1. 添加全部更改 git add . 注意最后面有个点
2. 签入全部更改 git commit -m "这里务必填写更改的内容消息"
3. 将更改Push到云端 git push origin master 如果远端服务器被自定义名称 origin 改成你自定义的名称
4. 从远端服务器获取更改 git pull origin master
更多...

在服务器安装和配置nginx

这个在学的时候没有写笔记，略过，有空以后再讲

使用docker安装nginx

详细 ...