3项目里面全局用less变量 cli vue_小白vue入坑自总结

一、.html页面引入vue，了解vue的基础指令和整个vue实例的基础架构

1.如何快速地搭建一个vue应用？

现在不需要提前安装任何环境

· 安装Vue，最简单的是创建一个.html页面，使用<script>标签引入Vue

· 创建Vue实例，创建挂载点（dom）

· 设置数据，挂载元素

· 渲染，把vue实例的数据绑定到指定的视图上

2.关于制定模板的方式：

1. 以上这种方式的模板的来源是通过将Vue实例挂载到一个DOM元素上并且将它的内部的HTML作为模板

2. 还可以通过传入一个字符串给template的方式，即把DOM元素内部的HTML传给template。

3. 使用渲染函数render

render函数中没有与v-model对应的API，要自己实现相应的逻辑（不是重点）

3.关于el，template，render属性优先性

当Vue选项对象中有render渲染函数时，Vue构造函数将直接使用渲染函数渲染DOM树，当选项对象中没有render渲染函数时，Vue构造函数首先通过将template模板编译生成渲染函数，然后再渲染DOM树，而当Vue选项对象中既没有render渲染函数，也没有template模板时，会通过el属性获取挂载元素的outerHTML来作为模板，并编译生成渲染函数。

换言之，在进行DOM树的渲染时，render渲染函数的优先级最高，template次之且需编译成渲染函数，而挂载点el属性对应的元素若存在，则在前两者均不存在时，其outerHTML才会用于编译与渲染。

搭建好这样的一个简单的vue应用，就可以对照Vue官方教程来学习Vue的基础指令。大概到自定义事件。这部分主要是理解Vue的响应机制和组件生命周期。

4.什么是响应式系统？

概括就是，数据变更驱动视图更新。这样我们就可以以“数据驱动”的思维来编写我们的代码，更多的关注业务，而不是dom操作。其实Vue响应式的实现是一个变化追踪和变化应用的过程。

4.1vue响应式处理：

以数据劫持方式，拦截数据变化；以依赖收集方式，触发视图更新。利用es5 Object.defineProperty拦截数据的setter、getter；getter收集依赖，setter触发依赖更新，而组件render也会变为一个watcher callback被加入相应数据的依赖中。

四个显著特点：

· 能灵敏响应请求

· 能回复

· 可伸缩扩展

· 基于消息驱动

5.组件。

组件是可复用的Vue实例，它接受相同的选项对象，但是Data必须是一个函数，还有就是el是根实例特有的选项，另外组件要有一个name。

组件分为全局注册和局部注册。

5.1全局注册

全局注册要在根实例（通过new Vue）创建之前发生。

5.2局部注册

全局注册不够理想，可以通过一个javasScript对象来定义组件，然后在components选项中定义你想要的组件。现在是把这些对象和vue实例写在一个文件里，我们也可以创建几个js文件来定义组件，那如何引用这些文件除了用<script>标签引入还可以使用ES6的模块。

模块的作用是将大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。在ES6之前最主要的模块加载方案是CommonJS和AMD两种，分别用于服务器和浏览器。ES6模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入输出的变量。ES6模块不是对象，而是通过export命令显示指定输出的代码，再通过import命令输入。ES6自动采用严格模式。

模块功能主要有两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块的功能。

二、使用npm webpack 构建一个Vue单页应用

webpack中文文档：

详见https://www.webpackjs.com/guides/installation/

1.构建步骤

· 安装node.js（为了保证webpack的正常安装，下载node.js的最新版本），npm包含在node.js之中

· 新建一个项目，再进入项目根目录执行npm init来初始化最简单的采用了模块化开发的项目（在项目根目录生成package.json文件）

· 安装webpack(目前最新版本是v4.41.2)建议本地安装不要全局安装，如果你使用 webpack 4+ 版本，你还需要安装 CLI。

· 在项目根目录创建webpack的配置文件，webpack.config.js。

在项目根目录下创建一个.html文件，创建一个src文件夹，在该文件夹下创建一个js文件、一个vue文件，这几个文件的命名要和webpack配置文件一致。

1.1webpack中的几个核心的概念：

Entry：入口，Webpack执行构建的第一步将从Entry开始，可抽象成输入

Module：模块，在webpack里一切皆模块，一个模块对应一个文件。Webpack会从配置的Entry开始递归找出所有依赖的模块。

Chunk：代码块，一个Chunk由多个模块组合而成，用于代码块合并与分割。

Loader：模块转换器，用于将模块的原内容按照需求转换成新内容。

Plugin：扩展插件，在webpack构建流程中的特定实际注入扩展逻辑，来改变构架结构或者做我们想做的事情。

Output：输出结果，在webpack经过一系列处理并得到最终想要的代码后输出结果。

1.2webpack的工作流程：

webpack启动后会从Entry里配置的Module开始，递归解析Entry依赖的所有Module。每找到一个Module就会根据配置的Loader去找出对应的转换规则，对module进行转换后再解析出当前module依赖的module。这些模块会以Entry为单位进行分组，一个Entry及其所有依赖的Module被分到一个组也就是一个Chunk。最后webpack会将所有Chunk转换成文件输出。在整个流程中，webpack会在恰当的时间执行Plugin里定义的逻辑。

1.3如何运行安装到本项目里的webpack

npm script（npm脚本）

直接命令行运行npm run build,就会在项目里得到一个dist文件夹，里面有一个输出的index.bundle.js文件，在index.html中引入这个js运行这个HTML就可以得到想要的结果。

1.4配置HtmlWebpackPlugin插件

以上是不配置HtmlWebpackPlugin插件的时候，配置HtmlWebpackPlugin插件的作用是什么？=》不需要再手动对index.html文件进行管理。当我们修改了入口起点的名称或者加入了一个新的名称，这个插件会自动更改引用文件的名称或者添加一个新的引用。

至此已经实现了webpack的基本的构建的过程，并且也知道了如何管理资源、管理输出，接下来应该想办法提升开发效率。

我们希望：

· 提供HTTP服务而不是本地预览

· 监听文件的变化并自动刷新网页，做到实时预览

· 方便调试

1.5开发环境配置

· 追踪错误和警告，将编译后的代码映射回原始源代码

如果devtool:false

· 代码发生变化后自动编译代码

选择一个开发工具webpack-dev-server

三、使用vue-cli快速创建Vue项目

· 使用vue-cli要保证安装了最新版本的node.js.(安装vue-cli要求node版本在8.9及以上，建议是8.11.0+)

· 全局安装webpack使用命令 npm install webpack webpack-cli -g，因为webpack4.0+的版本要求安装webpack-cli

· 全局安装vue-cli npm install -g vue-cli

· 使用vue-cli来构建项目 使用命令 vue init webpack vue-demo

模板下载成功会有一些交互的选项供选择，根据自己的情况自主选择，一般路由是要的 也推荐使用ESLint作为代码规范 包管理器我一般选择npm

介绍项目的前后端分离过程以及遇到的问题

未完待续....

相关demogithub地址：

https://github.com/Xiaobai700/myVueTest.gitXiaobai700/myVueTesthttps://github.com/Xiaobai700/myVueTest.git​github.com

---

项目进行前后端分离后端接口不变单独创建一个前端项目。

使用vue-cli创建一个前端项目，使用ElementUI组件库

实现基本的页面跳转（路由）

项目中使用Vue的官方路由vue-router库。

在使用vue-cli创建项目的时候会有一些选项，其中一个就是是否安装vue-router，如果你选择yes在最终创建的项目中就会有一个router文件夹里面有一个index.js文件，路由的相关配置就在这个文件里进行。而在入口文件中也会引入这个router的index.js文件。如果你选择了no那就要先安装vue-router，然后自己创建相关文件进行相关的配置。

<router-view>

此处的<router-view>是顶级插座。 它使组件与顶层路线匹配。 同样，渲染的组件也可以包含其自己的嵌套<router-view>。要将组件渲染到此嵌套插座中，我们需要在VueRouter构造函数config中使用children选项：

嵌套路线：

页面跳转以及传参的方式：

<router-link :to="...">
 router.push(...)

<router-link :to=”{path:’/user,,query:{userId:123}’}”>

Router.push({path:’/user’,query:{userId:123}’})

获取参数的方式：

this.$route.params.userId

this.route.query.userId

导航卫士

确定首页的布局（组件复用）

四个组件：pageAside pageHeader pageTab pageMain

点击pageAside组件中的导航链接，在pageTab中添加相应的tab，在pageMain组件中展示相应的页面。

关于组件之间的通信：

组件之间的嵌套关系如下：

• 父子组件

组件A和组件B之间通信

1. A to B 通过在B组件中定义props，A组件中v-bind 的方式实现，
2. B to A 通过在B组件中 $emit, A 组件中v-on 的方式实现

• 跨多级的组件嵌套关系

组件A和组件C之间通信有以下几种实现方式：

1. 借助B组件进行中转，从上到下props依次传递，从上至下$emit事件的传递达到跨组件的效果

2. 借助Vuex的全局状态共享（大材小用）

3. Vue EventBus Vue事件总线

使用Vue实例实现事件的监听和发布，实现组件之间的传递

• 兄弟组件

1. 组件B1、B2之间通信。同一个组件的两个子组件之间可以通过父组件来通信，子组件中使用ref，父组件中通过$refs来访问这个子组件，父组件自己定义一个方法来调用子组件的方法，然后问题就转换成了父组件和另外一个子组件通信的问题。（项目中使用的是这一种）

2. 使用Vue实例实现事件的监听和发布，实现组件之间的传递（Demo）

确定登录逻辑（vuex）

项目运行进入到登录页面，输入账号密码点击登录调用后台接口进行验证，后端使用shiro，验证成功根据账号密码生成token返回给前端，如果登录成功前端把后端返回的token存入sessionStorage（sessionStorage和localStorage的区别）,并且使用Vuex保存前端的登录状态，这也是用作判断是否登录，然后跳转首页。在路由配置那边注册全局钩子来拦截导航也就是上面提到的导航守卫。如果获取到了token那就获取登录用户的基本信息，然后Vuex存储用户信息。

Axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

安装：npm install axios

在入口文件中import：import axios from ‘axios’

Vue.prototype.$axios = axios;

借助Vue.prototype实现全局变量，因为每个组件都是一个Vue对象的实例，所以在每个组件中可以通过this.$axios来访问。

Axios的基本使用

执行get请求

axios.get('/user?ID=12345')
  .then(function (response) {
 console.log(response);
  })
  .catch(function (error) {
 console.log(error);
  });

//或者

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
 console.log(response);
  })
  .catch(function (error) {
 console.log(error);
  });

执行post请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
 console.log(response);
  })
  .catch(function (error) {
 console.log(error);
  });

axios使用get传递参数的时候使用的是params，而且要求必须是一个无格式对象(plain object)或 URLSearchParams 对象

axios使用post传递参数的时候使用的data，只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'， 在没有设置 `transformRequest` 时，必须是以下类型之一：
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams

post请求常见的数据格式：

• application/json 请求体中的数据以json字符串形式传给后端
• application / x-www-form-urlencoded 普通表单（字符串）
• multipart/form-data 既可以上传键值对也可以上传文件

axios中post的默认请求体类型是content-type：application/json即使用序列化后的json格式字符串来传递参数，这种情况下后台必须要以支持@RequestBody的形式来接收参数，否则参数就会接收不到。

如果后台以@RequestParam的方式来接收参数呢？@RequestParam用来处理content-type 是application / x-www-form-urlencoded编码的内容，通常用于get请求但是也可以处理post、delete等请求，所以axios发起post请求的时候，content-type是application / x-www-form-urlencoded，有以下几种方式：

• 使用URLSearchParams API

 const params = new URLSearchParams();
 params.append('param1', 'value1');
 params.append('param2', 'value2');
 axios.post('/foo', params);

• 使用qs库编码数据

const qs = require('qs');
 axios.post('/foo', qs.stringify(
{ 
'param1'：'value1',
'param2'： 'value2'
})
);

• ES6

 import qs from 'qs';
 const data = { 'param1'：'value1','param2'： 'value2' };
 const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
  url,
 };
 axios(options);

Promise

Promise是异步编程的一种解决方案，比传统的解决方案-回调函数和事件-更合理更强大。

Promise是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上来说promise是一个对象，从它可以获取异步操作的消息。

Promise的两个特点：

1. 对象的状态不受外界的影响

2. 一旦状态改变就不会再改变任何时候都可以得到这个结果。

Promise.then(function(data){
//success
}).catch(function(){
//err
})

SessionStorge和localStorage

WebStorage分为SessionStorge和localStorage。

1.sessionStorage：将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

2.localStorage：将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。

这两者的区别在于，sessionStorage为临时保存，而localStorage为永久保存。

动态权限管理（根据权限生成左边侧边栏）

在创建侧边栏pageAside组件的时候，组件创建完成调用后台根据用户信息查找用户权限的接口，根据返回的权限数据生成导航菜单。

简单列表页（表格+分页+搜索框）

使用elementUI组件库，搜索框写了一个组件复用。

实例详情页（Echarts图表，组件复用）