vue3+vite+js快速搭建前端项目
vue3+vite+js快速搭建前端项目
我先考虑如何将这些教程中的内容整合成一个连贯的搭建流程。我决定按照搭建项目的顺序，从安装Node.js和npm开始，然后是创建项目、安装依赖、配置项目、运行项目等步骤，逐步展开。
1. 安装 Node.js 和 npm
确保已安装 Node.js 和 npm，可通过以下命令检查版本：
node -v
npm -v
安装pnpm
pnpm 的出现
之后，pnpm 就诞生了。
为什么会出现 pnpm ？pnpm 的全称为 performance npm，翻译过来为高性能的 npm。原因是 pnpm 的作者一开始对 yarn 的发布有很高的期待，但是发布之后并没有满足作者，反而让作者有些失望。
至今 pnpm 发展迅速， 2022 年的下载量是 2021 年的 5 倍以上
执行安装命令：输入以下命令以全局方式安装pnpm。
npm install pnpm -g
2. 创建 Vue3 + Vite 项目
vite中文文档
兼容性注意：
Vite 需要 Node.js 版本 18+ 或 20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。
在命令行中运行以下命令来创建一个新的 Vue3 + Vite 项目：
npm create vite@latest my-vue-app -- --template vue
其中 my-vue-app 是项目名称，–template vue 指定使用 Vue 模板。如果 npm 版本是 7+，需要在命令中添加额外的双横线 --。
在提示中选择 JavaScript 作为编程语言，然后等待脚手架项目构建完成。
3. 进入项目目录并安装依赖
cd my-vue-app
npm install
4. 配置项目
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
server: {
port: 3000, // 指定开发服务器的端口号
open: true // 启动时自动打开浏览器
}
});
5. 运行项目
npm run dev
6. 项目结构说明
Vite 创建的项目通常包含以下文件和文件夹：
-
node_modules：存放项目依赖的文件夹。
-
public：存放静态资源的文件夹，例如图片、字体等。
-
src：存放项目源代码的文件夹。
main.js：项目入口文件。
App.vue：Vue 项目根组件。 -
index.html：项目首页。
-
package.json：项目配置文件，包含项目信息、依赖和脚本命令。
-
vite.config.js：Vite 配置文件，用于配置 Vite 的各种选项。
7. 添加路由和状态管理
如果项目需要路由功能，可以安装并配置 Vue Router：
npm install vue-router@4
然后在 src 目录下创建 router 文件夹，并在其中创建 index.js 文件来配置路由。
对于状态管理，可以使用 Pinia：
npm install pinia
在项目中引入并使用 Pinia 进行状态管理。
8. 构建项目
在项目开发完成后，可以使用以下命令构建项目，生成生产环境的静态文件：
npm run build
9. 配置 axios 请求
位置：src下新建文件夹utils
import axios from 'axios';
// 创建 axios 实例
const service = axios.create({
baseURL: 'https://api.example.com', // 请求基础路径
timeout: 5000 // 请求超时时间
});
// 请求拦截器
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么，例如添加 token
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
error => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
response => {
// 对响应数据做些处理
return response.data;
},
error => {
// 对响应错误做些处理
return Promise.reject(error);
}
);
export default service;
封装常见请求方式
位置：创建文件https.js
import instance from './axios';
export const get = (url, params = {}, config = {}) => instance.get(url, { params, ...config });
export const post = (url, data, config = {}) => instance.post(url, data, config);
export const put = (url, data) => instance.put(url, data);
export const del = (url, data) => instance.delete(url, { data });
统一封装接口
位置：创建api文件夹
import { get, post } from '@/utils/http';
/**
* 获取下载错误信息
* @param {string} batchId - 批次ID
* @returns {Promise} - 返回一个Promise对象，用于异步获取服务器响应
*/
export const downloadErrorMessage = (batchId, config = {}) => {
return get(`/admin/rrr/enterprise/downloadErrorMessage/${batchId}`, {}, config);
};
/**
* 登录
* @param {Object} data - 包含用户名和密码的对象
* @returns {Promise} - 返回一个Promise对象，用于异步获取服务器响应
*/
export const Login = (data) => {
return post('/admin/rrr/loginByPassword', data);
};
页面调用接口
例：login.vue
1、引入： import { Login } from ‘@/api/index.js’;
2、调用：
配置环境变量
# .env.development
VITE_API_BASE_URL=http://localhost:3000/api
# .env.production
VITE_API_BASE_URL=https://api.example.com/api
10. 集成 Element Plus
安装 Element Plus
npm install element-plus
ElementPlus官方文档
推荐使用：
npm install -D unplugin-vue-components unplugin-auto-import
vite.config.js配置
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()],
}),
],
})
main.js全局配置
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 })
11.使用 SCSS
安装 SCSS 相关依赖
npm install -D sass
配置 Vite 支持 SCSS
在 vite.config.js 中添加 SCSS 相关配置：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@/styles/variables.scss";` // 引入全局 SCSS 变量
}
}
}
});
创建全局 SCSS 变量文件
在 src 目录下创建 styles 文件夹，并在其中创建 variables.scss 文件：
// 定义全局 SCSS 变量
$primary-color: #42b983;
$secondary-color: #35495e;
$text-color: #2c3e50;
$background-color: #f5f5f5;
在组件中使用 SCSS
在组件中使用 SCSS 编写样式：
<template>
<div class="my-component">
<h1>{{ title }}</h1>
<p>{{ content }}</p>
</div>
</template>
<script>
export default {
data() {
return {
title: '我的组件',
content: '这是一个使用 SCSS 样式的组件。'
};
}
};
</script>
<style lang="scss" scoped>
.my-component {
background-color: $background-color;
padding: 20px;
border-radius: 8px;
h1 {
color: $primary-color;
margin-bottom: 10px;
}
p {
color: $text-color;
line-height: 1.6;
}
}
</style>
今天先到这里，明天继续更新。。。
后续会给出几个项目模板（vue3+vite+pinia+js/ts）
1、管理后台项目模板
2、自适应大屏项目模板
3、移动端H5项目模板