什么是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('信息校验失败')breakcase 401:Message.error('认证失败')breakcase 403:Message.error('token校验失败')breakcase 404:Message.error('请求的资源不存在')breakdefault: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 } = errif (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

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