3

一、创建vue项目

vue create vueapp

? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 (*) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
>( ) E2E Testing

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, PWA, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) n

二、配置并安装组件

1、更新vue版本：npm i vue@3.2.8 vue-router@4.0.11 vuex@4.0.2

2、在根目录下建立.prettierrc文件，在文件里写上如下代码，会自动帮我们补全一些符号

{
  "semi": false,          //分号检查，不使用分号
  "singleQuote": true,    //使用单引号
  "trailingComma": "none"  //是否使用尾逗号
}

3、安装axios：npm i axios --save

4、安装md5加密：npm i js-md5

5、安装NProgress：npm i nprogress

6、安装element-plus： npm install element-plus --save       安装element-plus指定版本：npm i element-plus@2.1.8       安装完成后，配置./src/main.js文件

import { createApp } from 'vue'
import App from './App.vue'     // 导入App根组件
import router from './router'   // 导入路由器
import store from './store'     // 导入状态管理
import ElementPlus from 'element-plus'  // 导入element-plus组件库
import 'element-plus/dist/index.css'   // 导入element-plus组件库对应样式
const app = createApp(App)
app.use(ElementPlus)
app.use(store).use(router).mount('#app')

三、清理vue项目

1、删除./scr/views 文件下的所有文件

2、修改./src/App.vue文件

// App.vue

App.vue

3、修改路由文件./src/router/index.js

// router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
// 导入nprogress
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
// 路由数据
const routes = [
  {
    path: '/login',
    component: () => import('../views/Login.vue')
  }
]
// 路由器对象
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
// 路由导航守卫
router.beforeEach((to, from, next) => {
  NProgress.start() // 开启加载进度条
  next()
})
router.afterEach((to, from) => {
  NProgress.done() // 结束加载进度条
})
// 导出，在main.js中导入
export default router

src/router/index.js

4、根目录下vue.config.js文件中修改配置

lintOnSave: false // 关闭每次保存都进行检测

四、新增工具文件夹utils

1、src下新建utils文件夹，

2、建立request.js

// request.js
// 导入axios请求库
import axios from 'axios'
// 导入nprogress
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 创建axios实力对象
const instance = axios.create({
  // 设置请求根路径
  baseURL: 'https://xxx.com:xxx/',
  // 请求超时时间
  timeout: 5000
})

// 添加请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 发送请求之前做什么
    NProgress.start() //开启加载进度条
    return config
  },
  (error) => {
    // 请求错误做什么
    return Promise.reject(error)
  }
)

// 添加响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 对响应做什么
    NProgress.done() //结束加载进度条
    return response
  },
  (error) => {
    // 响应错误做什么
    return Promise.reject(error)
  }
)

// 导出一个get方法
export const $get = (url, params) => {
  return instance.get(url, { params })
}
// 导出一个post方法
export const $post = (url, params) => {
  return instance.post(url, params)
}
// 导出设置请求头信息方法
export const $setHeader = (key, value) => {
    instance.defaults.headers.common[key] = value
}

// 将axios对象导出
export default instance

request.js

3、建立msg.js文件

// msg.js
// 导入消息框
import { ElMessage, ElMessageBox } from 'element-plus'
// 消息框
export const $msg = (
  message,
  type = 'success',
  duration = 1500,
  showClose = true
) => {
  ElMessage({
    message,
    type,
    duration
  })
}

// 确认框
export const $confirm = (message, title = '提示', type = 'warning') => {
  return new Promise((resolve, reject) => {
    ElMessageBox.confirm(message, title, {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type
    })
      .then(() => {
        resolve()
      })
      .catch(() => {
        // reject()
      })
  })
}

msg.js