Vue学习笔记（补）

一。webpack主要用来处理js代码

安装webpack步骤：
1.首先官网下载node并安装和配置环境
2.在cmd命令窗口输入node -v 查看是否安装成功
3.输入npm install webpack@3.6.0 安装3.6.0版本的webpack
4.输入webpack -v 查看是否安装成功
5.IDE本地安装webpack：
在控制台输入 npm install webpack@3.6.0 --save-dev 安装开发（dev表示开发时依赖）的webpack
然后

npm init 命令来在本地配置node

要想用webpack处理css、scss 、.vue等文件时，此时需要扩展webpack的loader:
1.通过npm安装相应的loader:npm install --save-dev css-loader
2.在webpack.config.js文件下的modules关键字下进行配置
loader用法和配置都可在官网找到

ES6语法处理：使用babel
在webpack中使用对应的babel的loader即可：
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015


安装vue模块：npm install vue --save  // 这里是为了系统在js代码里面识别vue代码

组件化开发vue：要想识别.vue文件必须有以下安装
npm install vue-loader vue-template-compiler --save-dev

注意：node（拥有V8引擎，底层是C++开发）可以直接执行js文件

二.plugin（插件）的安装与使用

1.横幅plugin只需要直接引用即可，webpack已经内置
2.htmlwebpackplugin可以将html文件一起打包：npm install html-webpack-plugin --save-dev
3.js文件压缩：npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

三.搭建webpack本地服务器（基于node.js,内部使用express框架）：

npm install webpack-dev-server@2.9.1 --save-dev
可以实现我们想要的让浏览器自动刷新显示我们修改后的结果，不用每次都打包一次

配置：
devServer: {
    contentBase: 为那一个文件提供本地服务，默认为根文件夹
    port: 端口号
    inline: 页面实时刷新
    historyApiFallback: 在SPA页面中，依赖HTML5的history模式
}
然后在package.json文件里面的scripts里面添加: "devServer": "webpack-dev-server --open"就可以本地跑起来了

四.webpack配置文件分离

1.建立build文件夹，把配置文件都放里面
再装上：npm install webpack-merge --save-dev
然后合并文件：1.base和dev，2.base和prod，见build文件夹配置过程

五.vue-cli自动生成webpack配置

关于卸载与安装：
    3.0以下的版本卸载：npm uninstall(install) -g vue-cli
    3.0以上的版本卸载: npm uninstall(install) -g @vue/cli
1.安装vue脚手架3.x：npm install @vue/cli -g，然后拉取脚手架2.x的模板: npm install @vue/cli-init
    如果安装失败：则删除此文件夹（C:\Users\19831\AppData\Roaming\npm-cache），再重试

Cli2.x初始化项目：vue init webpack 项目名称
如果初始化创建项目时勾选了ESlink，但是后面又不想用它，把index.js里面的useEslint改为false即可

Cli3.x初始化项目：vue create my-project
如果想删除自定义的那个配置了，在C:\Users\19831里面的.vuerc文件删除即可
cli3.x里面的配置文件都去哪了？怎么修改？
    1.启动vue的gui界面修改：vue ui
    2.在node_modules/@vue/cli-service修改配置
    3.添加一个vue.config.js文件自己添加配置，添加完系统会自动加入到默认原配置文件当中
用vuecli创建项目时，runtime-compiler与runtime-only(性能更高)的区别：代码区别：仅仅在入口js文件有区别
    runtime-compiler包含了运行时解析组件并渲染：template -> ast(抽象语法树)—> render函数形成一个虚拟dom -> 真实dom(UI)
    runtime-only仅仅只是渲染，不会解析组件：render函数形成一个虚拟dom -> 真实dom(UI)
    如果不在.vue文件中写组件，那么需要runtime-compiler，反之，如果上述的组件在.vue文件中
    那么我们需要安装vue-loader和vue-template-compiler来识别解析.vue文件，那么意味着，让我们用renter函数来调用组件时，
    此时的组件已经被解析过了，因此，安装了vue-loader和vue-template-compiler之后就只用runtime-only的就行了

六.Vue-Router

后端渲染与前端渲染：
    后端阶段：
        后端渲染：网页向服务器请求数据时，此网页已经在服务器渲染好了，一次性传输一整个页面
    ，并且此页面一般只包含html+css代码；数据是java或者php动态传给html的
        后端路由：处理后端渲染，后端处理URL与页面之间的映射关系，对不同的URL进行不同的处理

    前后端分离阶段：后端只负责数据，不负责任何阶段的内容，先从静态资源服务器获取html+css+js代码，
                  再js通过Ajax(提供API接口)传输、获取、处理后端数据
        前端渲染：在浏览器上显示的网页中的大部分内容，都是由前端写的js代码在浏览器中执行，最终渲染出来的网页

    单页面富应用阶段SPA：整个网站只有一个页面
        前端路由：
            当网页向服务器请求数据时，先从静态资源服务器获取html+css+js代码，显示相应的内容（并没有把内容全部显示），
            前端路由会对这个URL做一个映射，当点击页面上的其它按钮时（改变URL，页面不会进行整体刷新）
            ，本来应该会向静态资源服务器再一次请求数据，但是前端路由限制了这次行为，
            而是通过js里面的代码判断显示其他内容（其实每块内容就是一个组件，js每次展示一个组件）

改变URL，页面不会进行整体刷新的方法：
    1.改变URL的hash
    2.html5里面的history(栈结构）：history.pushState({},'','向原URL的后面追加字符串'),
        history.push()=history.go(-1),回退到上一个URL，history.forward()=history.go(1),回到下一个URL
        history.replaceState({},'','向原URL的后面追加字符串'),直接替换，不能返回
        这些方法等同于浏览器的前进后退

1.安装v-router：npm install vue-router --save
2.使用配置：在模块化工程中使用它：
    第一步：导入路由对象，并且调用Vue.use
    第二步：创建路由实例，并且传入路由映射配置
    第三步：在Vue实例中挂载创建的路由实例
3.创建路由映射配置的步骤：
    第一步：创建路由组件
    第二步：配置路由映射：组件和路径映射关系
    第三步：使用路由：通过<router-link>和<router-view>

4.懒加载：用到时，再加载
解决方案：把不同的路由对应的组件打包到不同的js文件，在router路由配置里面修改即可
        打包时，一个懒加载对应一个js文件

5.组件嵌套：
    1.创建对应的子组件，并且在路由映射中配置对应的子路由
    2.在组件内部使用<router-view>标签
6.vue-router参数传递：两种方式：params和query
    1.params：
        （1）配置路由格式：/router/:id
        （2）传递的方式：在path后面跟上对应的值
        （3）传递后形成的路径：router/123,router/abc
        （4）获取id值：$router.params.id
    2.query类型：
        (1)配置路由格式：/router,也就是普通配置
        (2)传递的方式：对象中使用query的key作为传递方式
        (3)传递后形成的路径：router?123,router?abc
7.vue-router导航守卫（全局守卫）：在路由跳转的时候有用处，比如跳转时改变页面标题（当然生命周期函数也可以实现）：
    1.首先在路由配置中加入meta属性
    2.router.beforeEach((to,from,next) => {} ) 来使用
8.Vue中的keep-alive：缓存组件页面的当前的信息，防止页面切换时被销毁，两个属性：include和exclude，包含组件和排除组件
    用法：把<router-view>标签放到keep-alive标签里面即可
    例：当把首页内容切换到消息时，从其他页面切回到首页还是显示消息，而不是新闻（注：这里同时需要组件内的导航守卫来实现）
9.文件路径问题
    可以给文件路径起别名：在webpack.base.conf.js文件下的resolve下的alias里面起别名
    然后import导入文件的时候直接用别名即可，但在html里面用别名需要在别名前面加上一个 ~

七.ES6里面的promise特性：异步编程的一种解决方案，网络请求中常用到

使用：一般有异步操作时，使用Promise对这个异步操作进行封装
用途：使逻辑结构更加清晰，避免回调地狱，Ajax异步请求层数很多时，容易混乱，Promise就是解决这个问题

注意：同一层级的请求会一起依次执行再执行下一层级的所有请求，以此类推

三种状态：
    1、pending：等待状态，正在请求或定时器未到时间
    2、fulfill：满足状态，主动回调了resolve函数之后，就是处于该状态，并且会掉then()函数
    3、reject：拒绝状态

八.Vuex：专为Vue.js开发的状态管理模式，集中式存储管理所有组件的状态

通俗解释：就是所有组件共享一些变量，而Vuex则可以把这些变量放在一个对象里面管理这些变量，并且他是响应式的
步骤：
    1.安装插件，Vue.use(Vuex)
    2.创建对象，new Vuex.store
        对象里面通常有五个对象：
         ·state：保存状态信息
         ·mutations：同步操作,且里面的函数的参数只能是store里面的五个对象，是Vuex的store状态更新的唯一方式
                 包括两部分：字符串的事件类型和一个回调函数，且回调函数的第一个参数为state，后面也可传入自定义参数
                 提交风格：
                    1.commit(字符串的事件类型,参数...)
                    2.commit({type: '字符串的事件类型',参数...}),不过这个时候传入的就是一个payload对象了，
                        获取参数：payload.参数
         ·actions：异步操作（网络请求）
         ·getters：相当于计算属性computed，且里面的函数的参数只能是store里面的五个对象
         ·modules：
    3.挂载到vue实例中
例子见10-vuex-learning
注意：虽然组件中可以直接修改state，但是直接在组件内修改state的内容是不可取的，
    因为会导致Devtools插件（浏览器插件）无法跟踪是谁修改的内容，应该通过mutations或者actions修改
state单一状态树（单一数据源）：把所有信息放在一个store里面，不推荐使用多个store对象
数据的响应式原理：只要在一开始被定义在state中的数据，都是响应式的，这些数据会被加入到响应式系统中，
    而响应式系统会监听数据的变化
Vuex-mutations类型常量（官方推荐）：防止定义和使用的时候字母写错

标题九.网络请求封装（axios框架）

支持Promise，执行完会在内部调用resolve()函数
全局配置: 常见配置用的时候上网查就可以了
    1.当URL的前缀相同时，可以设置：axios.defaults.baseURL = ''
    2.相同的请求超时时间：axios.defaults.timeout = 1000
axios实例和模块封装：即使进行了全局配置，但是有些时候不同的数据可能还是来自不同的服务器
拦截器：
    ·请求成功：
    ·请求失败：
    ·响应成功：
    ·响应失败：

标题十.新项目创建步骤

1.划分目录结构
2.引入两个基础css文件
3.vue.config和editorconfig文件
4.tabbar引入与项目模块划分

标题十一.知识点：

1.ref绑定组件时，父组件通过this.$refs.name拿到的是子组件对象
    绑定普通标签时，拿到的是对应的组件

2.防抖debounce函数/节流函数throttle
    ·对于refresh非常频繁的问题，要进行防抖操作