Vue 3+Vite项目搭建教程

Vue3 的组合式 API，加上 Vite 的极速热更新，真的是前端开发的一把好工具。你只要装好 Node，几条命令就能搞定整个项目搭建，过程也挺丝滑的。适合刚上手 Vue3 的你，或者懒得折腾配置的老前端。

Vue3 + Vite的项目创建体验，真的挺傻瓜化。全局装个create-vite，一条命令就能起项目：

npm install -g create-vite
create-vite my-vue3-project

命名可以自定，cd进去跑npm run dev，浏览器自动打开，还自带热更新，响应也快，体验蛮爽的。

像Composition API这种新特性，用起来也比老版本清晰多了。逻辑模块化后，比如封装个计数器逻辑，只要写一次，多个组件随便复用：

// src/composables/counter.js
export function useCounter() {
  const count = ref(0);
  function increment() { count.value++; }
  function decrement() { count.value--; }
  return { count, increment, decrement };
}

在setup()里引入用就行了，结构也清爽：

import { useCounter } from '../composables/counter';
export default {
  setup() {
    const { count, increment, decrement } = useCounter();
    return { count, increment, decrement };
  }
}

路由这块建议早点配起来，用vue-router@next，语法不难，文件结构也清晰：

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
const routes = [
  { path: '/', component: Home },
];
export default createRouter({
  history: createWebHistory(),
  routes,
});

开发完，用npm run build打包，dist目录下就是可部署的静态文件。整个流程不复杂，适合快速搞定项目原型。

如果你刚好在看 Vue3，或者正头疼项目初始化怎么搞，可以照着这个流程跑一遍，熟悉新特性还能少踩坑。