ViteVue3全攻略：从创建项目到配置路径和路由

使用 Vite 轻松上手 Vue3 项目开发

项目创建

创建 Vue3 项目，选择 Vite 作为构建工具，它轻量、高效。

步骤：

1. 创建项目文件夹 ：在你的计算机上，创建一个文件夹，存放你的 Vue3 项目。
2. 打开命令行工具 ：进入项目文件夹，打开命令行工具（如终端或命令提示符）。
3. 安装 Vite ：使用 npm 安装 Vite：

   npm install -g @vitejs/cli
   

4. 创建 Vue3 项目 ：使用 Vite CLI 创建 Vue3 项目：

   vite create index
   

5. 进入项目目录 ：

   cd index
   

6. 安装依赖 ：

   npm install
   

路径配置

步骤：

1. 打开配置文件 ：打开项目根目录下的 vite.config.js 文件。
2. 配置别名 ：在配置文件中，配置别名，方便引用项目模块：

   module.exports = {
     resolve: {
       alias: {
         '@': path.resolve(__dirname, './src'),
       },
     },
   };
   

路由配置

步骤：

1. 安装 Vue Router ：使用 npm 安装 Vue Router：

   npm install vue-router
   

2. 创建路由文件 ：在 src 目录下创建 router.js 文件，添加以下代码：

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

3. 在 main.js 中配置路由 ：

   import { createApp } from 'vue';
   import App from './App.vue';
   import router from './router';
   
   const app = createApp(App);
   
   app.use(router);
   
   app.mount('#app');
   

运行项目

步骤：

1. 启动开发服务器 ：在项目根目录下，运行命令启动开发服务器：

   npm run dev
   

2. 访问项目 ：在浏览器中访问 http://localhost:3000，即可看到你的 Vue3 项目。

常见问题解答

1. 如何更新项目的依赖项？

npm update

2. 如何构建项目？

npm run build

3. 如何使用 Vuex 进行状态管理？

npm install vuex
import Vuex from 'vuex'
const store = new Vuex.Store({})
app.use(store)

4. 如何使用 SASS 或 LESS 预处理器？

在 vite.config.js 中添加：

css: {
  preprocessorOptions: {
    scss: {
      additionalData: `@import "@/styles/main.scss";`
    }
  }
}

5. 如何部署 Vue3 项目？

npm run build
firebase deploy