文章目录
什么是vite创建项目1. 输入2. 安装vite3. 配置项目的基本信息4. 预览效果
配置项目配置项配置vue.config.jsvue-routervuexaxiosless
什么是vite
vite是vue官方推出的一个打包工具，打包速度比webpack要快得多，具体为什么快我看不懂。 总之就是一个打包工具，也可以代替脚手架来创建项目
创建项目
按照下面的命令可以创建出一个项目
1. 输入
npm init vite@latest
或者
npm create vite@latest
2. 安装vite
如果已经全局安装过就可以直接下一步
3. 配置项目的基本信息
项目的名称基础模板是否使用typescript
4. 预览效果
输入以下指令 就会看到打开了这样一个界面，只花了半秒时间，确实很快
配置项目
配置项
vue-routervuexlessaxios
配置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
安装
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('信息校验失败')
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
引入 在需要的地方引入
import Http from '@/utils/http'
less
安装后即可使用
npm i less -D
这样一个项目就配好了，如果需要配置其他的东西一般都是这些步骤。
相关文章
您阅读本篇文章共花了：
发表评论