一文教你用vite创建vue3项目初始化并添加router、axios、Pinia保姆级教程 ...

一、什么是vite

   Vite是新一代的前端构建工具，在尤雨溪开辟Vue3.0的时候诞生。类似于Webpack+ Webpack-dev-server。
其重要利用欣赏器ESM特性导入组织代码，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。
生产中利用Rollup作为打包工具，号称下一代的前端构建工具。
  Vite有如下特点：
   

• 快速的冷启动: No Bundle + esbuild 预构建
  
• 即时的模块热更新: 基于ESM的HMR，同时利用欣赏器缓存计谋提升速度
  
• 真正的按需加载: 利用欣赏器ESM支持，实现真正的按需加载
  

  Vite和传统打包方式的对比：

vite保举教程：Vite介绍
二、什么是vue3

   Vue 3是一个流行的开源JavaScript框架，用于构建用户界面和单页面应用。它带来了许多新特性和改进，包括更好的性能、更小的打包巨细、更好的TypeScript支持、全新的组合式API，以及一些新的内置组件。
  vue3保举教程：学Vue3 看这篇就够了
三、什么是router

   Vue Router 是 Vue.js 生态系统中的一个焦点插件，旨在帮助开辟者轻松地在单页面应用程序 (SPA)中实现路由功能。
  router保举教程：Vue Router 详解
四、什么是axios

   Axios 是一个基于 promise 的网络请求库，可以用于欣赏器和 node.js中。
  Axios（相比于原生的XMLHttpRequest对象来说）简单易用,（相比于jQuery）axios包尺寸小且提供了易于扩展的接口，是专注于网络请求的库。
  axios（ajax i/o system）不是一种新技术，本质上也是对原生XHR（XMLHttpReques）的封装，只不过它是基于Promise的，是Promise的实现版本，符合最新的ES规范。
  axios保举教程：axios详解
五、什么是pinia

   Pinia（发音为/piːnjʌ/，如英语中的“peenya”）是最接近 piña（西班牙语中的菠萝）的词。
Pinia本质上依然是一个全局状态管理的库，用于跨组件、页面举行状态共享（这点和Vuex、Redux、Mobx一样）。
  pinia保举教程：pinia详解
六、详细教程

1.查看nodejs版本

   打开 cmd 命令窗口，输入 node -v 查看nodejs版本：
  

   我这里是v22.2.0 ，版本够了，咱就继承往下操作。
    如果版本太低，可以用 nvm 切换一下；具体 nvm 使用教程，请查看我之前的文章：
Windows系统安装nodejs版本管理工具nvm(node version manager)实现nodejs版本自由切换详细教程踩坑实录
  2.使用vite最新版

   进入一个目录，好比我这里是 D:\Projects\Sandy\aiobs-vue3
输入命令pnpm create vite@latest
然后根据提示，输入项目名称、选择框架等
  

   创建乐成后，初始化项目，然后运行即可
  

   到这里，输入 pnpm run dev，运行项目
  

   打开 http://localhost:5173，即可看到项目运行后的效果
  

3.配置@指代src目录（可选）

   修改vite配置文件，我们的眼光直接焦距 vite.config.ts 这个文件

1. import { defineConfig } from "vite";
2. import vue from "@vitejs/plugin-vue";
3. import { resolve } from "path";
5. // https://vite.dev/config/
6. export default defineConfig({
7.   base: "./",
8.   plugins: [vue()],
9.   resolve: {
10.     // src 别名配置
11.     alias: {
12.       "@": resolve(__dirname, "src"),
13.     },
14.     // 使用路径别名时想要省略的后缀名，可以自己增减
15.     extensions: [".js", ".json", ".ts"],
16.   },
17. });

复制代码

  之后即可通过 @ 来代指 src 目录了
  4.安装router

   输入命令 pnpm install vue-router
  

   为了方便测试，我们在 src 目录下创建 views 目录，并添加 index.vue 和 about.vue 2个页面：
  

   index.vue 页面代码如下：

1. <template>
2.   <div>
3.     <h1>Home Page</h1>
4.     <button @click="to">Go About</button>
5.   </div>
6. </template>
7. <script setup lang="ts">
8. import { router } from "@/router";
10. function to() {
11.   router.push("/about");
12. }
13. </script>

复制代码

  about.vue 页面代码如下：

1. <template>
2.   <div>
3.     <h1>About Page</h1>
4.     <button @click="to">Go Home</button>
5.   </div>
6. </template>
7. <script setup lang="ts">
8. import { router } from "@/router";
10. function to() {
11.   router.push("/");
12. }
13. </script>

复制代码

  在 src 目录下添加 router 文件夹，在其下级添加 index.js 文件：
  

   在 index.js 里添加如下代码：

1. import { createRouter, createWebHistory } from "vue-router";
3. const routes = [
4.   {
5.     path: "/",
6.     component: () => import("@/views/index.vue"),
7.   },
8.   {
9.     path: "/about",
10.     component: () => import("@/views/about.vue"),
11.   },
12. ];
14. export const router = createRouter({
15.   history: createWebHistory(),
16.   routes,
17. });

复制代码

  在 main.js 中引入 router

1. import { createApp } from "vue";
2. import "./style.css";
3. import App from "./App.vue";
4. import { router } from "./router/index";
6. createApp(App)
7. .use(router)
8. .mount("#app");

复制代码

  最后，修改 App.vue 文件：

1. <script setup>
2. import { RouterView } from "vue-router";
3. </script>
5. <template>
6.   <router-view></router-view>
7. </template>
9. <style scoped>
10. .logo {
11.   height: 6em;
12.   padding: 1.5em;
13.   will-change: filter;
14.   transition: filter 300ms;
15. }
16. .logo:hover {
17.   filter: drop-shadow(0 0 2em #646cffaa);
18. }
19. .logo.vue:hover {
20.   filter: drop-shadow(0 0 2em #42b883aa);
21. }
22. </style>

复制代码

  运行看下效果：
  

   点击也能跳转
  

5.引入axios

   cmd 命令：

1. pnpm install axios

复制代码

6.引入pinia

   cmd 命令：

1. pnpm install pinia

复制代码

  修改 main.js 文件：

1. import { createApp } from "vue";
2. import App from "./App.vue";
4. import PrimeVue from "primevue/config";
5. import Aura from "@primevue/themes/aura";
7. import { router } from "./router/index";
9. import { createPinia } from "pinia";
10. const pinia = createPinia();
12. const app = createApp(App);
13. app.use(PrimeVue, {
14.   theme: {
15.     preset: Aura,
16.   },
17. });
18. app.use(pinia);
19. app.use(router);
20. app.mount("#app");

复制代码

至此，配置竣事。
下一篇我将介绍，如何添加一个UI框架，如：element ui 或 primevue ui等

---

   都看到这里了，各位帅哥/美女，不管有用没用，都帮助点个赞呗，谢谢~
  

---

      Author       吴所畏惧 2024.12.05   
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。