Vue-cli
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 ：
-
npm install -g @vue/cli -
npm install -g @vue/cli-init拉取2.x模板 -
报错 npm error 可以运行下面命令
npm cache clean --force && npm cache verify -
vue -V有版本号 证明下载成功 -
npm install -g cnpm --registry=https://registry.npm.taobao.org
-
-
webpack模板：
-
webpack复杂的webpack模块，单元测试、ESLint 热重载 -
vue init<模板> <项目名> -
vue init webpack 02-webpack_project -
Use ESLint to lint your code?(Y/n)选择n -
cd 02-webpack_project -
npm install -
npm run dev
-
-
重新下载项目依赖：
-
删除package-lock.json和node_modules
-
cd 项目
-
npm install
-
-
淘宝NPM镜像 点击
-
npm install -g cnpm --registry=https://registry.npm.taobao.org -
其它下载：
-
npm install axios -S -
npm install vuex -S -
npm install vue-cookies -S -
npm i element-ui -S -
npm install jquery -
npm install bootstrap@3.3.7
-
-
Vue有著名的全家桶系列，包含了
-
vue-router（http://router.vuejs.org）
-
vuex（http://vuex.vuejs.org）
-
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>
<!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>
| 目录/文件 | 说明 |
|---|---|
| build | 项目构建(webpack)相关代码 |
| config | 配置目录，包括端口号等。我们初学可以使用默认的。 |
| node_modules | npm 加载的项目依赖模块 |
| src |
这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
|
| static | 静态资源目录，如图片、字体等。 |
| test | 初始测试目录，可删除 |
| .xxxx文件 | 这些是一些配置文件，包括语法配置，git配置等。 |
| index.html | 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。 |
| package.json | 项目配置文件。 |
| README.md | 项目的说明文档，markdown 格式 |