文章目录配置项目
什么是vite
vite是vue官方推出的一个打包工具，打包速度比要快得多，具体为什么快我看不懂 。
总之就是一个打包工具，也可以代替脚手架来创建项目
创建项目
按照下面的命令可以创建出一个项目
1. 输入
npm init vite@latest或者npm create vite@latest
2. 安装vite
【3. 配置项目的基本信息】如果已经全局安装过就可以直接下一步
3. 配置项目的基本信息
4. 预览效果
输入以下指令
就会看到打开了这样一个界面，只花了半秒时间，确实很快
配置项目 配置项配置vue..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- 安装
npm install vue-router@4
创建路由文件夹，再文件加下创建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
在main.js中挂载
import router from '@/router/index'createApp(App).use(router).mount('#app')
vuex 安装
npm install vuex@next
创建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}}})
挂载
import vuex from '@vuex/index'createApp(App).use(router).use(vuex).mount('#app')
axios 安装
npm install axios
配置
创建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