vuejs的学习笔记

1、npm

npm：NPM 全称 Node Package Manager，它是 JavaScript 的包管理工具, 并且是 Node.js 平台的默认包管理工具。通过NPM 可以安装、共享、分发代码,管理项目依赖关系。
-v：表示查看版本号。
npm init 命令初始化项目：新建一个 npm-demo 文件夹，通过命令提示符窗口进入到该文件夹，执行命令进行初始化项目，根据提示输入相关信息，如果使用默认值，则直接回车即可。package name: 包名，其实就是项目名称，注意不能有大写字母，version: 项目版本号，description: 项目描述，keywords: {Array}关键字，便于用户搜索到我们的项目。最后会生成 package.json 文件，这个是包的配置文件，相当于 maven 的 pom.xml 我们之后也可以根据需要进行修改。npm init -y：初始化项目，均使用默认信息。
版本号：3.3.2，分别为大版本，次要版本，小版本。~3.5.2，安装3.5.x的最新版本，不低于3.5.2，不安装3.6版本。^3.5.2，安装3.x.x的最新版本，但是不安装4.x.x。latest，安装最新版本。
用npm安装模块：npm install 命令用于安装某个模块，安装方式分为 ：本地安装（local）、全局安装（global）两种。本地：npm install <Module Name>[@版本号]，eg，npm install express 3.2.2；全局安装就是命令后面多加一个-g。
全局模块安装：查看全局目录：npm root -g。更改全局目录：npm config set prefix "D:\npm"。
生产环境模块安装：格式：安装时在后面加上--save 或 -S。意思是把模块的版本信息保存 package.json 文件的 dependencies 字段中（生产环境依赖)。
开发环境模块安装：格式：安装时在后面加上--save-dev 或 -D 参数是把模块版本信息保存到 package.json 文件的 devDependencies 字段中（开发环境依赖),所以开发阶段一般使用它。
批量下载模块：通过package.json，里面会保存需要下载哪些模块。在package.json所在目录启动cmd，直接输入npm install，就可以安装里面的模块。
查看模块命令：npm list可以查看当前目录下下载的模块，或者在下载目录直接查看，或者npm list 模块，可以直接查看某个模块版本号，或者npm view 模块 version，可以查看该模块的最新版本，把version改为versions，可以查看所有版本号。
卸载模块：npm uninstall <Module Name>，如果是卸载全局模块，加上-g。
配置淘宝镜像加速：可以让网站速度变快，在安装模块时会比较快。查看当前使用的镜像地址npm get registry。配置淘宝镜像地址npm config set registry https://registry.npm.taobao.org。还原默认镜像地址：npm config set registry https://registry.npmjs.org/。

2、vs code

插件安装：open in browser，使用 Alt + B 使用默认浏览器打开当前 html 页面，或 Shift + Alt + B 选择其他浏览器。Vue 插件：Vue 2 Snippets，支持高亮和快捷键；Vetur，语法高亮、智能感知、Emmet等；Auto Rename Tag，自动完成另一侧标签的同步修改；Path Intellisense，自动路径补全；HTML CSS Support，让 html 标签上写class 智能提示当前项目所支持的样式，安装后有快捷提示。
快捷键pdf文档：https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf。
git版本控制：下载配置cmd路径到环境变量，配置vscode里面的setting文件，"git.path": "D:/Git/bin/git.exe"。 
debug调试：https://code.visualstudio.com/Docs/editor/debugging官方文档。

3、vuejs

vue介绍：主流的渐进式 JavaScript 框架。渐进式：可以和传统的网站开发架构融合在一起，例如可以简单的把它当作一个类似 JQuery 库来使用。也可以使用Vue全家桶框架来开发大型的单页面应用程序 。优点：vue.js 体积小，编码简洁优雅，运行效率高，用户体验好. 无Dom操作，它能提高网站应用程序的开发效率。应用场景：一般是需要开发单页面应用程序 （Single Page Application, 简称:SPA） 的时候去用；单页面应用程序，如：网易云音乐 https://music.163.com/；因为 Vue 是 渐进式 的，Vue 其实可以融入到不同的项目中，即插即用。
学习资源：官网里面的文档https://cn.vuejs.org/。
发展历史：作者，尤雨溪。vuejs不支持ie8-浏览器，没办法模拟es5特性。

4、vuejs的使用

第一个vuejs：
<div id="app">
        <!-- {{}}用于标签体内显示数据 -->
        hello,{{ msg }}<br>
        <!-- v-model进行数据的双向绑定 -->
        <input type="text" v-model='msg'>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app', //指定被vue管理的模块（利用选择器，但不能是body和html） 
            data: {
                msg: 'vuejs'
            }
        })
    </script>

MVVM模型：Model：模型， 数据对象（data选项当中 的）、View：视图，模板页面（用于渲染数据）、ViewModel：视图模型，其实本质上就是 Vue 实例。思想是通过数据驱动视图。
Vue Devtools 插件：让我们在浏览器控制台中可以审查和调试 Vue 项目。
vue模板数据语法： {{xxxx}}， 双大括号文本绑定，里面可以是文本内容也可以是js表达式。v-xxxx， 以 v- 开头用于标签属性绑定，称为指令。v-once 指令：执行一次性地插值，当数据改变时，插值处的内容不会更新。 v-html指令，用于输出HTML，还可以防止xss攻击，当里面的文本是js代码时，不会执行。元素绑定指令 v-bind： v-bind:元素的属性名='xxxx'，缩写格式， :元素的属性名='xxxx'，可以将数据动态绑定到指定的元素上。事件绑定指令 v-on：格式：v-on:事件名称="事件处理函数名"，缩写格式： @事件名称="事件处理函数名" 。作用，用于监听 DOM 事件。 
计算属性 computed：computed 选项，定义计算属性，计算属性一般用v-model来调用，类似于 methods 选项中定义的函数。计算机属性和methods函数比较：计算属性 会进行缓存，只在相关响应式依赖发生改变时它们才会重新求值，在调用时不需要跟函数一样写“函数名（）”，默认下只有getter函数，可以自己设置setter函数，进行双向绑定；函数 每次都会执行函数体进行计算，函数是单向的，函数调用要写“（）”。
监听器 watch：当属性数据发生变化时,对应属性的回调函数会自动调用, 在函数内部进行计算。通过 watch 选项 或者 vm 实例的 $watch() 来监听指定的属性。
Class 与 Style 绑定 v-bind：通过 class 列表和 style 指定样式是数据绑定的一个常见需求。它们都是元素的属性，都用 v-bind 处理，其中表达式结果的类型可以是：字符串、对象或数组，而一般的属性只能是字符串。v-bind:class='表达式' 或 :class='表达式'，class 的表达式可以为：字符串 :class="activeClass"；对象 :class="{active: isActive, error: hasError}"；数组 :class="['active', 'error']" 注意要加上单引号,不然是获取data中的值。v-bind:style='表达式' 或 :style='表达式'，style 的表达式一般为对象:style="{color: activeColor, fontSize: fontSize + 'px'}"。
v-if和v-show：v-if 是否渲染当前元素，v-else， v-else-if ，v-show 与 v-if 类似，只是元素始终会被渲染并保留在 DOM 中,只是简单切换元素的 CSS 属性 display 来显示或隐藏。v-if 与 v-show 比较：什么时候元素被渲染：v-if 如果在初始条件为假，则什么也不做，每当条件为真时，都会重新渲染条件元素；v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。使用场景选择：v-if 有更高的切换开销，v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行后条件很少改变，则使用 v-if 较好。
v-for 迭代数组：语法： v-for="(alias, index) in array"。说明： alias : 数组元素迭代的别名； index : 数组索引值从0开始(可选)
v-for 迭代对象：语法： v-for="(value, key, index) in Object"。说明： value : 每个对象的属性值; key : 属性名(可选); index : 索引值(可选) 。 可用 of 替代 in 作为分隔符。
事件处理 v-on：完整格式： v-on:事件名="函数名" 或 v-on:事件名="函数名(参数……)"，缩写格式： @事件名="函数名" 或 @事件名="函数名(参数……)"。event ：函数中的默认形参，代表原生 DOM 事件，使用时调用target属性即可代表元素节点，当调用的函数，有多个参数传入时，需要使用原生DOM事件，则通过 $event 作为实参传入。
事件修饰符：  .stop 阻止单击事件继续传播 event.stopPropagation()，.prevent 阻止事件默认行为 event.preventDefault()，.once 点击事件将只会触发一次。
按键修饰符：格式： v-on:keyup.按键名 或 @keyup.按键名。常用按键名：.enter，.tab，.delete (捕获“删除”和“退格”键)，.esc，.space，.up，.down，.left，.right。
vue的set方法：Vue.set（目标，key，value），目标可以写vm.data。
v-pre：可以用来显示原始插入值标签 {{}} 。并跳过这个元素和它的子元素的编译过程。加快编译。
v-text：等价于 {{}} ，用于显示内容，但区别在于，{{}} 会造成闪烁问题， v-text 不会闪烁。
v-cloak：如果还想用 {{}} 又不想有闪烁问题，则使用 v-cloak 来处理。步骤如下：在被 Vue 管理的模板入口节点上作用 v-cloak 指令；添加一个属性选择器 [v-cloak] 的CSS 隐藏样式： [v-cloak] {display: none;}，加入到css中。
过渡和动画效果：元素在显示和隐藏时，实现过滤或者动画的效果。常用的过渡和动画都是使用 CSS 来实现的，在 CSS 中操作 trasition （过滤 ）或 animation （动画）达到不同效果。为目标元素添加一个父元素 <trasition name='xxx'> , 让父元素通过自动应用 class 类名来达到效果。过渡与动画时，会为对应元素动态添加的相关 class 类名：
  xxx-enter ：定义显示前的效果。
  xxx-enter-active ：定义显示过程的效果。
  xxx-enter-to : 定义显示后的效果。
  xxx-leave : 定义隐藏前的效果。
  xxx-leave-active ：定义隐藏过程的效果。
  xxx-leave-to :定义隐藏后的效果。
  这些类需要自己定义，其中的xxx为父元素transition的name值，这样vuejs会自动添加类。

自定义指令（v-xxx）：先注册，后使用。定义指令里面的函数叫钩子函数（有inserted（对js操作），bind（对样式操作），update），里面可以有多个参数，一般为el（获取使用指令的元素）和binding（用于获取使用了指令的绑定值（value）即指令后面的值，表达式（expression），指令名（name））。
注册指令：注册全局指令
// 指令名不要带 v- 
Vue.directive('指令名', { 
// el 代表使用了此指令的那个 DOM 元素 
// binding 可获取使用了此指令的绑定值 等 
inserted: function (el, binding) {
 // 逻辑代码
 }
})
注册局部指令：
directives : { '指令名' : { 
// 指令名不要带 v-
 inserted (el, binding) { 
// 逻辑代码 
} } }。

5、todoMVC实战

获取模板：通过git可以获取，git clone 模板文件的url地址。
用到的属性和方法：
template，使用template元素，可以在页面渲染后自动消失，但是要和v-if搭配。
trim()方法，用于将字符串中的空格去除。push()方法，数组的元素添加。
filter（）方法，数组方法，用于过滤，当这个函数里面的回调函数的返回值为true就会将遍历时的该元素返回。
function（）{}：可以简写为（）=>{}，称为箭头函数。
splice（index，1）：数组方法，移除索引为index的1条数据。
shift()：删除数组的第一个元素，并返回。
自定义指令update（）：在有更新的时候使用这个函数。
substr（index）：字符串截取，从第index索引开始截取。
watch：监听器，加上deep：true属性，可以在对象内部发生改变时也可以监听到，同时对应的处理函数为handler。

6、vue过滤器

过滤器：过滤器对将要显示的文本，先进行特定格式化处理，然后再进行显示。过滤器并没有改变原本的数据, 只是产生新的对应的数据。
过滤器语法：全局过滤器：Vue.filter(过滤器名称, function (value1[,value2,...] ) { // 数据处理逻辑 })。局部过滤器：在Vue实例中使用 filter 选项 ， 当前实例范围内可用，new Vue({ filters: { 过滤器名称: function (value1[,value2,...] ) { // 数据处理逻辑 }} })。
过滤器使用位置：过滤器可以用在两个地方：双花括号 {{}} 和 v-bind 表达式。<!-- 在双花括号中 -->： <div>{{数据属性名称 | 过滤器名称}}</div>，多个参数时，第一个参数放在前面，其余的放在过滤器里面 <div>{{数据属性名称 | 过滤器名称(参数值)}}</div>。 <!-- 在 `v-bind` 中 --> ：<div v-bind:id="数据属性名称 | 过滤器名称"></div> <div v-bind:id="数据属性名称 | 过滤器名称(参数值)"></div>。

7、自定义插件

新建js：首先一定要添加一个自调用函数：(function(){})();。
步骤：声明插件对象。调用对象的install属性定义插件方法，对象.install=function（Vue，options）{里面可以定义方法和属性，自定义指令}，记得将插件暴露出来以便使用，window.MyPlugin = MyPlugin。引入插件，Vue.use(插件对象名)，其实就是安装插件。

8、vue组件化开发

组件：组件（component） 是 Vue.js 最强大的功能之一，每个组件都包含了html+css+js，实际上一个组件就是一个vue实例，可以单独管理自己的模板。Vue 中的组件化开发就是把网页的重复代码抽取出来 ，封装成一个个可复用的视图组件，然后将这些视图组件拼接到一块就构成了一个完整的系统。这种方式非常灵活，可以极大的提高我们开发和维护的效率。
组件优点：提高开发效率，增强可维护性，更好的去解决软件上的高耦合、低内聚、无重用的3大代码问题。
组件的使用：先注册，后使用。分全局和局部，一般公共部分定义为全局组件，如导航，轮播图等。全局：Vue.component('组件名',{ template: '定义组件模板'，data: function(){ //data 选项在组件中必须是一个函数 return {} }//其他选项：methods})。组件名：可使用驼峰(camelCase)或者横线分隔(kebab-case)命名方式，但 DOM 中只能使用横线分隔方式进行引用组件，官方强烈推荐组件名字母全小写且必须包含一个连字符。data必须是一个函数。
组件模板注意：template处的模板最好使用反单引号，不会报错。组件模板必须包含根元素，且只有一个，也就是说用一个div将模板包裹，因此会多一个div，可以在vue实例中使用选项template：‘<app></app>（可以简写为<app/>）’，会用组件将app入口替换，因此就可以少一个div。
组件间的通信方式： props 父组件向子组件传递数据，$emit 自定义事件（子组件向父组件传递数据）， slot 插槽分发内容（父组件找到子组件的一个位置插入标签+数据）。
组件间的通信规则： 不要在子组件中直接修改父组件传递的数据。 数据初始化时，应当看初始化的数据是否用于多个组件中，如果需要被用于多个组件中，则初始化在父组件中；如果只在一个组件中使用，那就初始化在这个要使用的组件中。数据初始化在哪个组件, 更新数据的方法(函数)就应该定义在哪个组件。
props：组件的一个选项。数组形式：里面是属性名。对象形式：key（属性名），value（数据类型）。对象形式：key（属性名），value（对象，里面包含类型、默认值、是否必须传过来（required）等）。注意事项： props 只用于父组件向子组件传递数据；所有标签属性都会成为组件对象的属性, 模板页面可以直接引用；如果需要向非子后代传递数据，必须多层逐层传递；兄弟组件间也不能直接 props 通信, 必须借助父组件才可以。
$emit 自定义事件：在子组件中绑定事件，里面是：this.$emit('delete_emp', index)。注意事项： 自定义事件只用于子组件向父组件发送消息(数据)；隔代组件或兄弟组件间通信此种方式不合适。
slot插槽：父组件：<div slot="aaa">向 name=aaa 的插槽处插入此标签数据</div>。子组件：<slot name="aaa">不确定的标签结构 1</slot>。注意事项：只能用于父组件向子组件传递 标签+数据；传递的插槽标签中的数据处理都需要定义所在父组件中。
非父子组件之间通信：通过 PubSubJS 库来实现非父子组件之间的通信 ，使用 PubSubJS 的消息发布（数据来源）与订阅模式（数据显示的位置），来进行数据的传递。
下载PubSubJS 库：npm install pubsub-js。
PubSubJS 库使用：在钩子函数created（）里面进行订阅， PubSub.subscribe('消息名称（相当于事件名）', (event, data)=> { // 事件回调处理 })，event接收的是消息名称，data是接收发布时传递的数据，使用箭头函数（）=>{}，因为箭头函数没有this，此时的this就会代表外面的实例，而不是PubSub。
单文件组件：上面定义组件时存在的问题:全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复。字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 。不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏。没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如 Pug(formerly Jade) 和 Babel。文件扩展名为 .vue 的 single-file components(单文件组件) 为以上所有问题提供了解决方法，并且还可以使用webpack 或 Browserify 等构建工具。

9、生命周期和Ajax服务端通信

vue实例生命周期：beforeCreate：Vue 实例创建前被调用，数据和模板均未获取到。created：Vue实例创建后，最早可以获取到 data数据的钩子，但是模板未获取到，建议在这里面发送 ajax 异步请求。beforeMount：数据挂载之前，获取到了模板，但是数据还未挂载到模板上。mounted：数据已经挂载到模板中了。beforeUpdate：当data 数据更新之后，去更新模板中的数据前调用。updated：模板中的数据更新后调用。beforeDestroy：销毁 Vue 实例之前调用。destroyed：销毁 Vue 实例之后调用。
vue-resource库：非官方，不推荐使用。https://github.com/pagekit/vue-resource/blob/develop/docs/http.md。
vue中用的Ajax库：axios，官方库，使用时结合生命钩子获取数据，渲染数据。参考文档https://github.com/axios/axios/blob/master/README.md。

10、Vue-Router 路由

Vue-Router：Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得非常简单。通过根据不同的请求路径，切换显示不同组件进行渲染页面。
路由的配置：安装：npm install vue-router。配置路由：new VueRouter({ linkActiveClass（全局配置 router-link 标签生成的 CSS 类名 ）: 'active', routes: [ {path（路径）: '/about', component（组件）: About，children（子路由）: []} ] })，
路由使用步骤：定义需要切换的组件；配置路由；讲路由注入到vue实例中；定义路由出口，将标签<router-view>放在需要渲染的地方。在定义a标签时，官方推荐使用<router-link to="/xxx"（如果to里面需要写表达式，就要通过属性绑定：to来写）>（可以设置标签的tsg属性，设置需要渲染的标签，eg，tag=‘li’；还可以设置active-class属性，设置动态class样式，点击就会添加，但是这种方式每个连接都要加一个样式，可以使用全局样式添加到路由器中，在路由器中添加选项linkActiveClass：‘’，设置样式；但是此时会有一个问题，点击其他时也会匹配/，这样首页也会被渲染，使用为了精确匹配，可以在首页link加一个属性，exact精确匹配。），不需要在路径里加#号，而且默认会自动渲染a标签，a标签中路径是含有#的。
缓存路由：在路由出口外围添加一个标签<keep-alive>。
嵌套路由：可以使用占位符:id，动态路由，可以获取id来改变路由路径。ES6里面可以用${id}进行拼接。
编程式路由：this.$router.push(path) 相当于点击路由链接(后退1步,会返回当前路由界面)。 this.$router.replace(path) 用新路由替换当前路由(后退1步,不可返回到当前路由界面)。 this.$router.back() 后退回上一个记录路由 。this.$router.go(n) 参数 n 指定步数 ，this.$router.go(-1) 后退回上一个记录路由 ，this.$router.go(1) 向前进下一个记录路由。

11、Webpack

Webpack：Webpack 是一个前端的静态模块资源打包工具（核心打包js文件），能让浏览器也支持模块化。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
Webpack 作用：Webpack 核心主要进行 JavaScript 资源打包。它可以结合其他插件工具，将多种静态资源css、png、sass 分类转换成一个个静态文件，这样可以减少页面的请求。可集成 babel 工具实现 EcmaScript 6 转 EcmaScript 5 ，解决兼容性问题。可集成 http 服务器。可集成模块热加载，当代码改变后自动刷新浏览器 等等功能。
目录结构：src目录：放原生代码。dist目录：放打包好了的代码。
安装：全局：npm install -g webpack，npm install -g webpack-cli。本地：npm i -D webpack，npm i -D webpack-cli，本地安装之前要现在项目初始化，npm init -y。
ES6学习：推荐教程https://es6.ruanyifeng.com/。
导出默认成员：export default 成员，默认成员只能有一个，不然会报错。
导出非默认成员：export 成员，非默认成员必须要有成员名称。
自动打包：在package.json里面的scripts配置一个"watch": "webpack --watch"。
打包css资源（现在已经支持打包image，并且改好了路径问题）：引入插件style-loader和css-loader，配置webpack.config.js。
实时重新加载：引入插件webpack-dev-server，配置webpack.config.js。

12、vue loader

vue loader：打包Vue单文件组件。安装插件：npm install -D vue-loader， vue-template-compiler需要单独安装，因为版本要跟vue版本一致。
HMR：模块热替换，只针对组件的更新。模块热替换无需完全刷新页面，局部无刷新的情况下就可以更新。

13、vue CLI

vue CLI：项目脚手架，不需要自己配置webpack。
安装使用：全局安装，npm install -g @vue/cli。运行 “vue create 项目名”命令来创建一个新项目，创建默认配置项目。
自定义项目配置：在项目根目录下创建 vue.config.js 文件。devServer: {port: 8001, // 端口号，如果端口被占用，会自动提升 1 open: true, // 启动服务自动打开浏览器 https: false, // 协议 host: "localhost", // 主机名，也可以 127.0.0.1 或 做真机测试时候 0.0.0.0}, lintOnSave: false, // 默认 true, 警告仅仅会被输出到命令行，且不会使得编译失败。 outputDir: "dist2", // 默认是 dist ,存放打包文件的目录, assetsDir: "assets", // 存放生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir) 目录 indexPath: "out/index.html", // 默认 index.html, 指定生成的 index.html 的输出路径 (相对于 outputDir)。productionSourceMap: false, // 打包时, 不生成 .map 文件, 加快打包构建
Eslint 插件：ESLint 是一个语法规则和代码风格的检查工具，可以 用来保证写出语法正确、风格统一的代码。
Eslint 配置：在项目根目录下的 package.json 文件中有 eslintConfig 选项中配置, 或者 .eslintrc.js文件 配置。
自定义语法规则： 语法规则写在 package.json 或 .eslintrc.js 文件中 rules 选项中, 语法如下：“规则名": [错误等级值, 规则配置]。
按规则自动修复代码：npm run lint。
配置vue.json文件：可以定义好vue的模板，不需要每次自己输入，便于开发。

14、会员管理系统开发

使用前后端分离（依赖于API文档），单页面开发。
Restful架构：通过HTTP请求方式(GET查询/POST添加/PUT修改/DELETE删除...)来区分对资源CRUD操作。设计API，里面有请求方式、请求参数、请求uri。
Mock.js：数据生成器，生成模拟的数据接口，用来模拟后台的数据实现前后端分离。官网mockjs.com。通过拦截 Ajax 请求，根据数据模板生成并返回模拟数据，让前端攻城师独立于后端进行开发，帮助编写单元测试。
Mock.js的作用：前后端分离，让前端攻城师独立于后端进行开发。增加单元测试的真实性，通过随机数据，模拟各种场景。开发无侵入，不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。用法简单，符合直觉的接口。数据类型丰富，支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。方便扩展，支持扩展更多数据类型，支持自定义函数和正则。
安装mockjs：npm install mockjs。
数据模板定义规范 DTD： '属性名|生成规则': 属性值 ，'name|rule': value。使用Mock里面的mock（）方法。
数据占位符定义规范 DPD：Mock.Random 是一个工具类，用于生成各种随机数据。Mock.Random 类中的方法在数据模板中称为『占位符』，书写格式为 @占位符(参数 [, 参数]) 。
项目初始化：创建项目；更改标题；更改图标；配置vue.config.js文件；安装axios和pubsub-js。
ElementUI：Element 是饿了么平台推出的一套基于 Vue.js 开发的后台页面组件库。安装：npm i -S element-ui。
Axios 封装和跨域问题：@/表示当前项目的src目录。跨域问题：在 vue.config.js 文件中使用 devServer.proxy 选项进行代理配置。 配置不同环境 常量值：在 mxg-mms 根目录下创建 .env.development 和 .env.production 文件，使用 VUE_APP_ 开头的变量会被 webpack 自动加载，所以定义时都以此开头，在项目任意模块文件中，都可以使用 process.env.VUE_APP_ 获取值，注意在赋值常量时用双引号。
权限校验：Vue Router中的 前置钩子函数 beforeEach(to, from, next)，当进行路由跳转之前，进行判断 是否已经登录 过，登录过则允许访问非登录页面，否则 回到登录页。to:  即将要进入的目标路由对象，from: 即将要离开的路由对象，next: 是一个方法，可以指定路由地址，进行路由跳转。
过滤器实现数据转换：支付类型是编号，应该将类型编号 转为名称。通过 filters 选项来定义过滤器来实现转换。// 声明支付类型
const payTypeOptions = [ { type: '1', name: '现金' }, { type: '2', name: '微信' }, { type: '3', name: '支付宝' }, { type: '4', name: '银行卡' }]。注意：在过滤器中不能引用当前实例this。

标签：npm,Vue,vuejs,笔记,js,学习,vue,组件,路由
来源： https://blog.csdn.net/a15107071954/article/details/120983641