Vite基本使用

什么是vite

vite是vue官方推出的一个打包工具，打包速度比webpack要快得多，具体为什么快我看不懂。
总之就是一个打包工具，也可以代替脚手架来创建项目

---

创建项目

按照下面的命令可以创建出一个项目

1. 输入

npm init vite@latest

或者

npm create vite@latest

2. 安装vite

如果已经全局安装过就可以直接下一步

3. 配置项目的基本信息

• 项目的名称
• 基础模板
• 是否使用typescript

4. 预览效果

输入以下指令

就会看到打开了这样一个界面，只花了半秒时间，确实很快

---

配置项目

配置项

• vue-router
• vuex
• less
• axios

配置vue.config.js

将这个文件改为一下内容，代码中写有注释，不再做解释

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve('./src')  //设置绝对路径
    }
  },
  base: './', // 打包路径
  server: {
    port: 4000, // 服务端口号
    open: true, // 服务启动时是否自动打开浏览器
    cors: true // 允许跨域
  }
})

vue-router

1. 安装

npm install vue-router@4

2. 创建路由文件夹，再文件加下创建index.js文件，写入一下代码

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: () => import(/* webpackChunkName: "Home" */ '@/views/home.vue')
  },
  { path: '/', redirect: { name: 'Home' } }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

3. 在main.js中挂载

import router from '@/router/index'

createApp(App).use(router).mount('#app')

vuex

1. 安装

npm install vuex@next

2. 创建vuex文件夹，在index.js中写入以下代码

import { createStore } from 'vuex'

const defaultState = {
  count: 0
}

// Create a new store instance.
export default createStore({
  state() {
    return defaultState
  },
  mutations: {
    increment(state) {
      state.count += 1
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  },
  getters: {
    double(state) {
      return 2 * state.count
    }
  }
})

3. 挂载

import vuex from '@vuex/index'

createApp(App).use(router).use(vuex).mount('#app')

axios

1. 安装

npm install axios

2. 配置
   创建utils文件夹，在文件夹里创建一个名为http.js的文件
   写入以下内容

import axios from 'axios'
import { Message } from 'element-ui'
// 创建axios实例
// 创建请求时可以用的配置选项

const instance = axios.create({
  withCredentials: true,
  timeout: 1000,
  baseURL: ''
})
// axios的全局配置
instance.defaults.headers.post = {
  'Content-Type': 'application/x-www-form-urlencoded'
}
instance.defaults.headers.common = {
  'Auth-Type': 'company-web',
  'X-Requested-With': 'XMLHttpRequest',
  token: 'sdfjlsdfjlsdjflsjflsfjlskd'
}

// 添加请求拦截器(post只能接受字符串类型数据)
instance.interceptors.request.use(
  (config) => {
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

const errorHandle = (status, other) => {
  switch (status) {
    case 400:
      Message.error('信息校验失败')
      break
    case 401:
      Message.error('认证失败')
      break
    case 403:
      Message.error('token校验失败')
      break
    case 404:
      Message.error('请求的资源不存在')
      break
    default:
      Message.error(other)
      break
  }
}

// 添加响应拦截器
instance.interceptors.response.use(
  // 响应包含以下信息data,status,statusText,headers,config
  (res) => (res.status === 200 ? Promise.resolve(res) : Promise.reject(res)),
  (err) => {
    Message.error(err)
    const { response } = err
    if (response) {
      errorHandle(response.status, response.data)
      return Promise.reject(response)
    }
    Message.error('请求失败')
    return true
  }
)

export default instance

3. 引入
   在需要的地方引入

import Http from '@/utils/http'

less

安装后即可使用

npm i less -D

---

这样一个项目就配好了，如果需要配置其他的东西一般都是这些步骤。