module: { rules: [ { test: /.vue$/, loader: ‘vue-loader’ } ] }

<a name="TNmVu"></a>
### 使用单文件组件

```javascript
/* main.js */

import Vue from 'vue'
// 导入 App 组件
import App from './App.vue'

const vm = new Vue({
  el: '#app',
  // 通过 render 方法，渲染App组件
  render: c => c(App)
})

单文件组件使用步骤

• 1 安装：npm i -D vue-loader vue-template-compiler
• 2 在 webpack.config.js 中配置 .vue 文件的loader
  • { test: /\.vue$/, use: 'vue-loader' }
• 3 创建 App.vue 单文件组件，注意：App可以是任意名称
• 4 在 main.js 入口文件中，导入 vue 和 App.vue组件，通过 render 将组件与实例挂到一起

单文件组件+路由

• vue - Vue.use
• Vue.use 和 路由

import Vue from 'vue'
import App from './App.vue'

// ------------- vue路由配置 开始 --------------
import Home from './components/home/Home.vue'
import Login from './components/login/Login.vue'

// 1 导入 路由模块
import VueRouter from 'vue-router'
// 2 ** 调用use方法使用插件 **
Vue.use(VueRouter)
// 3 创建路由对象
const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/login', component: Login }
  ]
})

// ------------- vue路由配置 结束 --------------

const vm = new Vue({
  el: '#app',
  render: c => c(App),
  // 4 挂载到 vue 实例中
  router
})

路由

• 路由即：浏览器中的哈希值（# hash）与展示视图内容（template）之间的对应规则
• vue中的路由是：hash 和 component的对应关系
  在 Web app 中，通过一个页面来展示和管理整个应用的功能。
  SPA往往是功能复杂的应用，为了有效管理所有视图内容，前端路由 应运而生！
  简单来说，路由就是一套映射规则（一对一的对应规则），由开发人员制定规则。
  当URL中的哈希值（# hash）发生改变后，路由会根据制定好的规则，展示对应的视图内容

基本使用

• 安装：npm i -S vue-router ```javascript
  首页 登录

<a name="UbImr"></a>
### 重定向
路由重定向redirect的基本使用：[https://blog.csdn.net/jyn15159/article/details/112344702](https://blog.csdn.net/jyn15159/article/details/112344702)
```javascript
//  将path 重定向到 redirect
{ path: '/', redirect: '/home' }

路由其他配置

• 路由导航高亮
  • 说明：当前匹配的导航链接，会自动添加router-link-exact-active router-link-active类
  • 配置：linkActiveClass
• 匹配路由模式
  • 配置：mode

new Router({
  routers:[],
  mode: "hash", //默认hash | history 可以达到隐藏地址栏hash值 | abstract，如果发现没有浏览器的 API 则强制进入
  linkActiveClass : "now" //当前匹配的导航链接将被自动添加now类
})

路由参数

• 说明：我们经常需要把某种模式匹配到的所有路由，全都映射到同一个组件，此时，可以通过路由参数来处理
• 语法：/user/:id
• 使用：当匹配到一个路由时，参数值会被设置到 this.$route.params
• 其他：可以通过 $route.query 获取到 URL 中的查询参数 等

// 方式一
<router-link to="/user/1001">如果你需要在模版中使用路由参数 可以这样 {{$router.params.id}}</router-link>
// 方式二
<router-link :to="{path:'/user',query:{name:'jack',age:18}}">用户 Rose</router-link>


<script>
  // 路由
  var router = new Router({
    routers : [
      // 方式一 注意 只有/user/1001这种形式能被匹配 /user | /user/ | /user/1001/ 都不能被匹配
      // 将来通过$router.params获取参数返回 {id:1001}
      { path: '/user/:id', component: User }, 
      // 方式二
      { path: "user" , component: User}
    ]
  })

// User组件：
const User = {
  template: `<div>User {{ $route.params.id }}</div>`
}
</script>  
<!-- 如果要子啊vue实例中获取路由参数 则使用this.$router.params 获取路由参数对象 -->
<!--  {{$router.query}} 获取路由中的查询字符串 返回对象 -->

嵌套路由 - 子路由

• 路由是可以嵌套的，即：路由中又包含子路由
• 规则：父组件中包含 router-view，在路由规则中使用 children 配置

// 父组件：
const User = Vue.component('user', {
  template: `
  <div class="user">
  <h2>User Center</h2>
  <router-link to="/user/profile">个人资料</router-link>
  <router-link to="/user/posts">岗位</router-link>
  <!-- 子路由展示在此处 -->
  <router-view></router-view>
  </div>
  `
})

// 子组件[简写]
const UserProfile = {
  template: '<h3>个人资料：张三</h3>'
}
const UserPosts = {
  template: '<h3>岗位：FE</h3>'
}

// 路由
var router =new Router({
  routers : [

    { path: '/user', component: User,
     // 子路由配置：
     children: [
       {
         // 当 /user/profile 匹配成功，
         // UserProfile 会被渲染在 User 的 <router-view> 中
         path: 'profile',
         component: UserProfile
       },
       {
         // 当 /user/posts 匹配成功
         // UserPosts 会被渲染在 User 的 <router-view> 中
         path: 'posts',
         component: UserPosts
       }
     ]
    }
  ]
})

axios

• Promise based HTTP client for the browser and node.js
  • 以Promise为基础的HTTP客户端，适用于：浏览器和node.js
  • 封装ajax，用来发送请求，异步获取数据
• 安装：npm i -S axios
• axios

// 在浏览器中使用，直接引入js文件使用下面的GET/POST请求方式即可
// 1 引入 axios.js
// 2 直接调用axios提供的API发送请求
created: function () {
  axios.get(url)
    .then(function(resp) {})
}

---
  // 配合 webpack 使用方式如下：
  import Vue from 'vue'
import axios from 'axios'
// 将 axios 添加到 Vue.prototype 中
Vue.prototype.$axios = axios

  ---
  // 在组件中使用：
  methods: {
    getData() {
      this.$axios.get('url')
        .then(res => {})
        .catch(err => {})
    }
  }

---
  // API使用方式：

  axios.get(url[, config])
axios.post(url[, data[, config]])
axios(url[, config])
axios(config)

Get 请求

const url = 'http://vue.studyit.io/api/getnewslist'

// url中带有query参数
axios.get('/user?id=89')
    .then(function (response) {
    console.log(response);
    })
    .catch(function (error) {
    console.log(error);
    });

// url和参数分离，使用对象
axios.get('/user', {
    params: {
    id: 12345
    }
})

Post 请求

• 不同环境中处理 POST请求
• 默认情况下，axios 会将JS对象序列化为JSON对象。为了使用 application/x-www-form-urlencoded 格式发送请求，我们可以这样：

// 使用 qs 包，处理将对象序列化为字符串
// npm i -S qs
// var qs = require('qs')
import qs from 'qs'
qs.stringify({ 'bar': 123 }) ===> "bar=123"
axios.post('/foo', qs.stringify({ 'bar': 123 }))

// 或者：
axios.post('/foo', 'bar=123&age=19')

const url = 'http://vue.studyit.io/api/postcomment/17'
axios.post(url, 'content=点个赞不过份')

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

全局配置

// 设置请求公共路径：
axios.defaults.baseURL = 'http://vue.studyit.io'

拦截器

• 拦截器会拦截发送的每一个请求，请求发送之前执行request中的函数，请求发送完成之后执行response中的函数

// 请求拦截器
axios.interceptors.request.use(function (config) {
    // 所有请求之前都要执行的操作

    return config;
    }, function (error) {
    // 错误处理

    return Promise.reject(error);
    });

// 响应拦截器
axios.interceptors.response.use(function (response) {
    // 所有请求完成后都要执行的操作

    return response;
    }, function (error) {
    // 错误处理
    return Promise.reject(error);
    });

Mint-UI

• 基于 Vue.js 的移动端组件库
• Mint-UI
• 安装：npm i -S mint-ui

// 1 导入 mint-ui模块
import MintUI from 'mint-ui'
// 2 导入 样式
import 'mint-ui/lib/style.css'
// 3 注册插件
Vue.use(MintUI)

vant

• Vant 是一个轻量、可靠的移动端组件库
• Vant
• 安装：npm i vant

<!-- 引入样式文件 -->
<link
  rel="stylesheet"
  href="https://fastly.jsdelivr.net/npm/vant@3/lib/index.css"
/>

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
<script src="https://fastly.jsdelivr.net/npm/vant@3/lib/vant.min.js"></script>

ElementUI

• 这是PC端的UI组件库
• 饿了么 - ElementUI
• 安装：npm i -S element-ui

{
  "presets": [
    ["es2015", { "modules": false }], "stage-0"
  ],

  "plugins": [
    ["component", [
      {
        "libraryName": "mint-ui",
        "style": true
      },
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-default"
      }
    ]]
  ]
}