ToB企服应用市场:ToB评测及商务社交产业平台

标题: 一文教你用vite创建vue3项目初始化并添加router、axios、Pinia保姆级教程 [打印本页]
作者: 来自云龙湖轮廓分明的月亮    时间: 2024-12-14 10:08
标题: 一文教你用vite创建vue3项目初始化并添加router、axios、Pinia保姆级教程
一、什么是vite

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



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4