项目流程简述01-准备工作以及封装

搭建脚手架

1.ps:创建脚手架的步骤就不多赘述了.

2.三删两改

(1)三删 : HelloWorde.vue / AboutView.vue / HomeView.vue

(2)两改 :

router / index.js

 

APP.vue

(将所有的代码删除,重新搭建架构)

 

Element按需导入

1. 导入组件(一般选择按需导入)

a. 推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

b . 安装 babel-plugin-component：

npm install babel-plugin-component -D

2. 修改babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ]
  ]
}

<!--在APP中进行测试.如果出现button按键,就证明操作无误-->

 

 

模块化封装以及二次封装

1.模块化封装

a. 创建: src / utils / element.js

b. 完整组件列表和引入方式 :

Element - The world's most popular Vue UI framework

 

c. 在mian.js中执行element.js代码

 

d.创建 src / utils / storage.js 搭建本地储存

const KEY = 'interview-pc'
​
// 存储token 有参无返回
export const setToken = token => { localStorage.setItem(KEY, token) }
​
// 获取token 无参有返回
export const getToken = () => localStorage.getItem(KEY)
​
// 删除toekn 无参无返回
export const removeToken = () => { localStorage.removeItem(KEY) }

​

d. 创建 src / utils / request.js 创建基地址以及拦截器

<-- 下载axios组件 -->

npm i axios

<-- 创建基地址 -->

<-- 拦截器并导入getToken( ) -->

// 导入axios组件
import axios from 'axios'
​
import { getToken } from '@/utils/storage.js'
import { Message } from 'element-ui'
import router from '@/router'
​
// 创建基地址
const request = axios.create({
  baseURL: 'http://interview-api-t.itheima.net/',
  timeout: 50000
})
​
// 拦截器
// 2.1 请求拦截器
request.interceptors.request.use(config => {
  // 发送请求之前做些什么
  if (getToken()) {
    config.headers.Authorization = `Bearer ${getToken()}`
  }
  // config:请求报文
  return config
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error)
})
​
// 2.2 响应拦截器
request.interceptors.response.use(response => {
  // 对响应数据做点什么
  // response:响应报文
  // (3)解构处理
  return response.data
}, error => {
  // 对响应错误做些什么
  // (1)错误提示
  Message.warning(error.response.data.message)
  // (2)401处理
  if (error.response.status === 401) {
    router.push('/login')
  }
  return Promise.reject(error)
})
​
// 默认导出
export default request

2.axios二次封装

a. 创建src / api / user.js 以及article.js

在user.js中

// 导入request

import request from '@/utils/request.js'

​
// 登录
export const UserLogin = ({ username, password }) => request.post('/auth/login', { username, password })

b. 在APP.vue中测试

<script>
import { UserLogin } from '@/api/user.js'
export default {
  async created () {
    // 登录接口
    const data = await UserLogin({
      username: 'admin',
      password: 'admin'
    })
    console.log(data)
  }
}
</script>

<!--*默认导出是一个很容易忽略掉的点,一定要切记切记,如果出现了这样的报错,很有可能就是"export default request" 写掉了*-->

 

<!--如果是请求成功,就证明之前的步骤都是正确的,准备工作没有错误,可以开始导入路由了,所以及时测试是非常有必要的-->

 

3.导入路由配置

<!--在**src / views**中创建页面,实际页面数量根据业务多少来操作,只需记住**一级路由是整个整个页面,二级路由是有tab切换栏的**。按照下图这个思路去设置. ps:重定向的单词是 : redirect-->

 

以上就是提前准备工作,在测试完毕后就可以开始页面布局了 (ฅ∀<`๑)♡ !!!