快速通过命令行搭建Vite项目

快速搭建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
相关推荐
Nick_zcy7 小时前
开发基于python的商品推荐系统,前端框架和后端框架的选择比较
开发语言·python·前端框架·flask·fastapi
三原10 小时前
2025 乾坤(qiankun)和 Vue3 最佳实践(提供模版)
vue.js·架构·前端框架
懒羊羊我小弟10 小时前
React Router v7 从入门到精通指南
前端·react.js·前端框架
boxser13 小时前
前端实现高效的国际化解决方案
前端·javascript·前端框架
程序猿chen13 小时前
量子跃迁:Vue组件安全工程的基因重组与生态免疫(完全体终局篇)
前端·vue.js·git·安全·面试·前端框架·跳槽
数据智能老司机13 小时前
React关键概念——处理事件和状态
react.js·前端框架·前端工程化
数据智能老司机15 小时前
React关键概念——理解React组件与JSX
react native·react.js·前端框架
火星思想1 天前
都2025年了,还在问构建工具是干嘛的?
前端·前端框架·设计
vvilkim2 天前
React 与 Vue:两大前端框架的深度对比
vue.js·react.js·前端框架
猿究院_xyz2 天前
跟着尚硅谷学vue-day5
前端·javascript·vue.js·前端框架·html