快速通过命令行搭建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
相关推荐
PleaSure乐事7 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
getaxiosluo7 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v7 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
September_ning15 小时前
React.lazy() 懒加载
前端·react.js·前端框架
晴天飛 雪15 小时前
React 守卫路由
前端框架·reactjs
web行路人15 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
一ge科研小菜鸡18 小时前
React前端框架:现代网页开发的基石(附带构建简单任务管理应用案例代码)
前端框架
熊的猫18 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
前端青山1 天前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
qq_364371722 天前
VueRouter 导航故障问题
javascript·vue.js·前端框架·vue-router