快速搭建Vite项目
介绍
下列是一个完整从零开始搭建Vite项目的代码示例。
创建项目
创建一个本地项目文件夹,在cmd中输入
npm init vite@latest my-vue-app -- --template vue
快速使用router
使用npm安装
npm install vue-router --save
import { createRouter, createWebHistory } from 'vue-router'
const routerHistory = createWebHistory()
const router = createRouter({
history: routerHistory,
routes: [
{
path: '/',
name:'index',
component: () => import('../views/login/login.vue')
},
})
export default router
在main.js文件中设置
import router from './router/index.js'
app.use(router)
快速使用axios
使用npm安装
npm i axios vue-axios --save
编写request.js文件,设置后端请求地址、发送请求前后措施、捕获异常措施
import axios from "axios";
import "nprogress/nprogress.css";
const requests = axios.create({
baseURL: "http://43.139.2.22:7801",
timeout: 25000,
});
requests.interceptors.request.use(
function (config) {
// 在发送请求之前做些什么
return config;
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器 => 后端给前端的数据【后端返回给前端的东西】
requests.interceptors.response.use(
function (response) {
// 对响应数据做点什么
return response;
},
function (error) {
// 对响应错误做点什么
return Promise.reject(error);
}
);
export default requests;
在main.js文件中设置
import axios from "axios";
import VueAxios from "vue-axios";
.use(VueAxios, axios)
快速使用Element-Plus
使用npm安装
npm install element-plus --save
在main.js文件添加
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)
可选安装自动导入
npm install -D unplugin-vue-components unplugin-auto-import
在vite.config.ts文件中添加
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})
快速使用vuex
使用npm安装
npm install vuex --save
创建store文件,在此目录下编写index.js
import { createStore } from "vuex";
import tabStore from './tabStore.js'
export default createStore({
state: {
tab: 0
},
mutations: {
changeTab(state, tab){
state.tab = tab
}
},
modules: {
tabStore: tabStore
},
});
编写main.js文件
import store from './store'
app.use(store)
快速使用core.js
使用npm安装
npm install core-js --save