从 0 到 1 搭建 Vue 项目

前提条件：安装了node，js

1，创建项目

（1）方式一：Vue 官方脚手架（最标准）

复制代码

npm create/init vue@latest

（2）方式二：Vite 直接创建

复制代码

npm create vite@latest

（3）效果展示

2，安装依赖（npm install 对应依赖）

（1）核心功能类（必装或常装）

依赖名称	作用	说明
Vue Router	路由管理	用于单页面应用（SPA）的页面跳转和视图切换source_group_web_1。
Pinia	状态管理	Vue 3 首选。替代了 Vuex，更轻量、对 TypeScript 支持更好source_group_web_2。
Vuex	状态管理	Vue 2 标配。虽然也能在 Vue 3 用，但官方已推荐用 Pinia 替代source_group_web_3。
Axios	HTTP 请求	用于与后端 API 进行数据交互（发送 GET/POST 请求）source_group_web_4。

（2） UI 组件库（选装）

依赖名称	适用场景	说明
Element Plus	PC 端后台	Vue 3 首选。Element UI 的升级版，国内最流行，文档齐全source_group_web_5。
Element UI	PC 端后台	Vue 2 标配。老牌组件库，稳定但不再维护新功能source_group_web_6。
Ant Design Vue	PC 端后台	阿里 Ant Design 的 Vue 实现，设计规范非常优秀。
Vant	移动端	有赞团队维护，适合手机 H5 页面，轻量且好用source_group_web_7。
Naive UI	PC 端后台	尤雨溪推荐过，组件丰富，主题定制灵活。

（3）开发与工具类（提升效率）

依赖名称	作用	说明
Sass / Less	CSS 预处理	让你在 CSS 中使用变量、嵌套等高级语法，写样式更方便source_group_web_8。
@vueuse/core	工具函数集	强烈推荐。提供了大量基于组合式 API 的实用工具（如监听窗口大小、本地存储等）source_group_web_9。
Lodash	数据处理	强大的 JavaScript 工具库，用于处理数组、对象、防抖节流等source_group_web_10。
Day.js	时间处理	轻量级的时间库，用于格式化日期（如 `2026-04-24`）source_group_web_11。
ECharts	数据可视化	百度开源的图表库，用于画折线图、柱状图、地图等。

（4）安装以后导入依赖（Pinia,Axios,Element Plus,ECharts,Vue Router为列子）

复制代码

/*可以简化成这样
 *npm install element-plus axios pinia vue-router echarts
*/
npm install element-plus
npm install axios 
npm install pinia
npm install router 
npm install echarts

在main.js 中没有引入

复制代码

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
// 引入 Element Plus
import ElementPlus from 'element-plus'
// 引入 Element Plus 的样式
import 'element-plus/dist/index.css'
// 引入路由
import router from './router'
// 引入Pinia
import pinia from './store'
const app = createApp(App)
// 使用插件（注意顺序：router、ElementPlus、pinia）
app.use(router)
app.use(ElementPlus)
app.use(pinia)
app.mount('#app')

3，启动项目

（1）进入项目目录

复制代码

cd 你的项目名称

（2）安装依赖（如果还没安装）

复制代码

npm install

（3）启动服务

复制代码

npm run dev/create