快速通过命令行搭建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