标签：npm Vue vuejs 笔记 js 学习 vue 组件 路由
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。