Vue-cli

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 格式
posted @ 2019-03-01 20:40  silencio。  阅读(158)  评论(0)  编辑  收藏  举报