Vuecli

Vue-cli

官方文档：点击 Vue指令

生态圈 github

vue-cli是官方提供的快速构建这个单页面应用的脚手架。

前端开发中提到的“脚手架”是一个形象的比喻，比喻各类语言的前期工作环境。

在软件开发上（当然也包括前端开发）的脚手架指的就是：有人帮你把这个开发过程中要用到的工具、环境都配置好了，你就可以方便地直接开始做开发，专注你的业务，而不用再花时间去配置这个开发环境，这个开发环境就是脚手架。

比如vue.js就有个vue-cli脚手架，基于node.js的开发环境，作者帮你把开发环境大部分东西都配置好了，你把脚手架下载下来就可以直接开发了，不用再考虑搭建这些工具环境。

一、安装

去官网 https://nodejs.org/en/download/ 下载安装,Node.js是运行在服务端的JavaScript，基于Chrome V8 引擎的。
打开终端 cmd : 执行node -v 如果出现版本号，证明安装node成功
下载完node之后，会自带包管理器npm，好比是python中 pip3包管理器。pip3 install xxx
使用npm全局安装vue-cli ：
1. npm install -g @vue/cli
2. npm install -g @vue/cli-init 拉取2.x模板
3. 报错 npm error 可以运行下面命令npm cache clean --force && npm cache verify
4. vue -V 有版本号证明下载成功
5. npm install -g cnpm --registry=https://registry.npm.taobao.org
webpack模板：
1. webpack复杂的webpack模块，单元测试、ESLint 热重载
2. vue init <模板> <项目名>
3. vue init webpack 02-webpack_project
4. Use ESLint to lint your code?(Y/n) 选择n
5. cd 02-webpack_project
6. npm install
7. npm run dev
重新下载项目依赖：
1. 删除package-lock.json和node_modules
2. cd 项目
3. npm install
淘宝NPM镜像点击
npm install -g cnpm --registry=https://registry.npm.taobao.org
其它下载：
1. npm install axios -S
2. npm install vuex -S
3. npm install vue-cookies -S
4. npm i element-ui -S
5. npm install jquery
6. npm install bootstrap@3.3.7
Vue有著名的全家桶系列，包含了
1. vue-router（http://router.vuejs.org）
2. vuex（http://vuex.vuejs.org）
3. vue-resource（https://github.com/pagekit/vue-resource）

二、目录结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <p>{{ a }}</p>
    <!-- 这里的 `foo` 不会更新！ -->
    <button @click="a = 'baz'">Change it</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
  <script>

    // 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的

    var data = {a: 1};

    var vm = new Vue({
      // 选项
      el: "#app",
      data: data
    });


    // 1、数据绑定

    /*
     *  数据与方法
     *  获得这个实例上的属性
     *  返回源数据中对应的字段
     *  设置属性也会影响到原始数据
     */
    vm.a = 2;
    console.log(data.a); // => 2

    /*
     *  ……反之亦然
     *  data.a = 3;
     *  vm.a // => 3
     */

    // 2、数据声明

    /*
     *  注: 当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的
     *  那么现在添加一个新的属性, 比如:
     */

    vm.b = 'liuzhichao';

    /*
     *  那么对 b 的改动将不会触发任何视图的更新, 所以知道在晚些时候需要一个属性
     *  那么要设置一些初始值, 即在 data 里面声明它
     */

    // 3、阻止修改数据属性

    /*
     *  这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化
     */

    Object.freeze(data);  // 数据在声明之前 应执行此方法

    // 4、数据监听

    /*
     *  除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法
     *  它们都有前缀 $，以便与用户定义的属性区分开来
     */

    console.log(vm.$data === data); // => true
    console.log(vm.$el === document.getElementById('example')); // => true

    // $watch 是一个实例方法
    vm.$watch('a', function (newValue, oldValue) {
      // 这个回调将在 `vm.a` 改变后调用
      console.log(newValue, oldValue);
    });

    vm.a = 6  // 会调用对应的数据改变的 回调方法

  </script>
</body>
</html>

View Code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue实例生命周期钩子</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>
<script>

  // 1、生命周期

  /*
   *  每个 Vue 实例在被创建时都要经过一系列的初始化过程, 例如:
   *    需要设置数据监听
   *    编译模板
   *    将实例挂载到 DOM 并在数据变化时更新 DOM
   *    等等
   *
   *  同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会
   *  不懂钩子的童鞋可以这样理解:
   *    钩子就好像是把人的出生到死亡分成一个个阶段，你肯定是在出生阶段起名字，而不会在成年或者死亡的阶段去起名字
   *    特定的钩子去做特定的事情
   *
   *  那么Vue钩子函数如下所示:
   *
   *    `beforeCreate`        组件实例刚刚被创建, 组件属性计算之前, 如 `data` 属性等
   *    `created`             组件实例创建完成、属性已绑定, 但DOM还未生成, `$el` 属性还不存在
   *    `beforeMount`         模板编译/挂载之前
   *    `mounted`             模板编译/挂载之后
   *    `beforeUpdate`        组件更新之前, 属性值更新等
   *    `updated`             组件更新之后, 属性值更新等
   *    `activated`           for `keep-alive`, 组件被激活时调用
   *    `deactivated`         for `keep-alive`, 组件被移除时调用
   *    `beforeDestroy`       组件实例销毁前调用
   *    `destroyed`           组件实例销毁后调用
   *
   *  直接 copy 最下方代码 即可调试
   *
   *    更新操作
   *    `vm.message = 1`
   *
   *    销毁操作
   *    `vm.$destroy()`   销毁完成后, 后续便不再受Vue控制
   *
   *  总结:
   *
   *    beforeCreate : 举个栗子：可以在这加个loading事件
   *    created ：在这结束loading，还做一些初始化，实现函数自执行
   *    mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
   *    beforeDestroy： 你确认删除XX吗？ destroyed ：当前组件已被删除，清空相关内容
   *
   */

  var vm = new Vue({
    el: '#app',
    data: {
      message: "vue id good"
    },
    beforeCreate: function () {
      console.group('beforeCreate 创建前状态===============》');
      console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
      console.log("%c%s", "color:red", "data   : " + this.$data); //undefined
      console.log("%c%s", "color:red", "message: " + this.message)
    },
    created: function () {
      console.group('created 创建完毕状态===============》');
      console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
      console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
      console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
    },
    beforeMount: function () {
      console.group('beforeMount 挂载前状态===============》');
      console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
      console.log(this.$el);
      console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
      console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
    },
    mounted: function () {
      console.group('mounted 挂载结束状态===============》');
      console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
      console.log(this.$el);
      console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
      console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
    },
    beforeUpdate: function () {
      console.group('beforeUpdate 更新前状态===============》');
      console.log("%c%s", "color:red", "el     : " + this.$el);
      console.log(this.$el);
      console.log("%c%s", "color:red", "data   : " + this.$data);
      console.log("%c%s", "color:red", "message: " + this.message);
    },
    updated: function () {
      console.group('updated 更新完成状态===============》');
      console.log("%c%s", "color:red", "el     : " + this.$el);
      console.log(this.$el);
      console.log("%c%s", "color:red", "data   : " + this.$data);
      console.log("%c%s", "color:red", "message: " + this.message);
    },
    beforeDestroy: function () {
      console.group('beforeDestroy 销毁前状态===============》');
      console.log("%c%s", "color:red", "el     : " + this.$el);
      console.log(this.$el);
      console.log("%c%s", "color:red", "data   : " + this.$data);
      console.log("%c%s", "color:red", "message: " + this.message);
    },
    destroyed: function () {
      console.group('destroyed 销毁完成状态===============》');
      console.log("%c%s", "color:red", "el     : " + this.$el);
      console.log(this.$el);
      console.log("%c%s", "color:red", "data   : " + this.$data);
      console.log("%c%s", "color:red", "message: " + this.message)
    }
  })

</script>
</body>
</html>

View Code

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： assets: 放置一些图片，如logo等。 components: 目录里面放了一个组件文件，可以不用。 App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 main.js: 项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式