快速通过命令行搭建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
相关推荐
冷冷的菜哥12 小时前
react实现无缝轮播组件
前端·react.js·typescript·前端框架·无缝轮播
Hilaku14 小时前
我为什么认为 CSS-in-JS 是一个失败的技术?
前端·css·前端框架
薛定谔的算法19 小时前
Vue.js 条件渲染与列表渲染详解:原理、用法与最佳实践
前端·vue.js·前端框架
OEC小胖胖20 小时前
App Router vs. Pages Router:我应该如何选择?
开发语言·前端·前端框架·web·next.js
歪歪1001 天前
webpack 配置文件中 mode 有哪些模式?
开发语言·前端·javascript·webpack·前端框架·node.js
Aotman_1 天前
el-input textarea 禁止输入中文字符,@input特殊字符实时替换,光标位置保持不变
前端·javascript·vue.js·前端框架·es6
伍哥的传说1 天前
React Device Detect 完全指南:构建响应式跨设备应用的最佳实践
react.js·前端框架·react hooks·操作系统识别·device-detect·react设备检测·浏览器检测
百思可瑞教育2 天前
Vue 生命周期详解:从初始化到销毁的全过程剖析
前端·javascript·vue.js·前端框架·uni-app·北京百思可瑞教育·百思可瑞教育