快速通过命令行搭建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
相关推荐
冴羽yayujs1 天前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·vue.js·前端框架·react
编程社区管理员2 天前
「2025最新版React+Ant Design+Router+TailwindCss全栈攻略:从零到实战,打造高颜值企业级应用
前端·react.js·前端框架
前端三叶草2 天前
静态分析:现代前端脚手架路由梳理
前端·前端框架
GISer_Jing3 天前
React-Markdown详解
前端·react.js·前端框架
harry235day3 天前
Flutter getx 状态管理
flutter·前端框架
程序员ys3 天前
微前端是什么?
微服务·架构·前端框架
2501_906801204 天前
BY组态-低代码web可视化组件
前端·物联网·低代码·数学建模·前端框架
sma2mmm4 天前
微前端实现方案对比Qiankun VS npm组件
前端·前端框架·npm
hac13224 天前
利用GitHub Pages快速部署前端框架静态网页
前端框架·github