devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vite+vue3(vuex、vuerouter、axios)+elementplus项目保姆教程_vite+vue + element plus

作者：小蓝xlanll | 2024-03-12 20:24:52

赞

踩

vite+vue + element plus

简单来说就是记录一下怎么从0开始搭建一个vue3+vite+elementplus的项目,

本文详细记录了每一步的代码\控制台和文件操作,包括项目搭建\安装vuerouter\安装vuex\安装axios和一些发版前准备工作,

可以说是保姆级教程了,喜欢可以收藏一下,

有问题大家一起在评论区探讨

2022/6/2更新

提供一个除了都处理好了的基础代码,clone下来可以直接使用

git地址https://github.com/shinjie1210/vite-config.git

----------------------------------------------------------------------------------------------------------------------------

目录

1.创建并初始化项目

2.安装使用vue-router

3.安装使用vuex

4.安装使用axios

5.安装使用element-plus

6.发版准备工作

未完待续....

1.创建并初始化项目

控制台输入

 npm init vite@latest

然后自己填下项目名称和项目框架 这里我还是选择js的,感兴趣ts的朋友可以自己了解下,也不复杂

cd进项目目录后install一下就可以run起来了

为了方便后面修改啥的,再加上我这个人比较懒,就去设置一下run之后自动默认浏览器打开

在package.json里进行如下修改

  1. {
  2.   "name": "a-project",
  3.   "version": "0.0.0",
  4.   "scripts": {
  5.     "dev": "vite --open",//改了这一行 添加了--open
  6.     "build": "vite build",
  7.     "preview": "vite preview"
  8.   },
  9.   "dependencies": {
  10.     "vue": "^3.2.25"
  11.   },
  12.   "devDependencies": {
  13.     "@vitejs/plugin-vue": "^2.0.0",
  14.     "vite": "^2.7.2"
  15.   }
  16. }

 然后清理一下 把默认的内容都清空了,留一个主页logo就可以了

  1. <script setup>
  2. </script>
  3.  
  4. <template>
  5.   <img alt="Vue logo" src="./assets/logo.png" />
  6. </template>
  7.  
  8. <style>
  9.   #app {
  10.     font-family: Avenir, Helvetica, Arial, sans-serif;
  11.     -webkit-font-smoothing: antialiased;
  12.     -moz-osx-font-smoothing: grayscale;
  13.     text-align: center;
  14.     color: #2c3e50;
  15.     margin-top: 60px;
  16.   }
  17. </style>

 推荐用vscode的各位使用  Vue Language Features (Volar) 这个插件 比较好用

2.安装使用vue-router

npm install vue-router@4

 然后新建如下文件用于配置和测试路由

 配置路由页面index

  1. import {
  2.     createRouter,
  3.     createWebHistory
  4. } from 'vue-router'
  5.  
  6. const routerHistory = createWebHistory()
  7.  
  8. const router = createRouter({
  9.     history: routerHistory,
  10.     routes: [{
  11.         path: '/',
  12.     }, {
  13.         path: '/foo',
  14.         component: () => import('../views/foo.vue')
  15.     }, {
  16.         path: '/bar',
  17.         component: () => import('../views/bar.vue')
  18.     }]
  19. })
  20. export default router

测试页面foo.vue/bar.vue

  1. <template>
  2.     <div>this is foo page</div>
  3. </template>
  4. <script setup>
  5. </script>
  6. <style>
  7. </style>

app.vue页面进行如下修改

  1. <script setup>
  2.   import {
  3.     useRouter
  4.   } from 'vue-router'
  5.   const router = useRouter()
  6.  
  7.   function toFoo() {
  8.     router.push({
  9.       path: '/foo'
  10.     })
  11.   }
  12.  
  13.   function toBar() {
  14.     router.push({
  15.       path: '/bar'
  16.     })
  17.   }
  18. </script>
  19.  
  20. <template>
  21.   <div>
  22.     <img alt="Vue logo" src="./assets/logo.png" />
  23.   </div>
  24.   <button @click="toFoo">to foo</button>
  25.   <button @click="toBar">to bar</button>
  26.   <router-view></router-view>
  27. </template>
  28.  
  29. <style>
  30.   #app {
  31.     text-align: center;
  32.     color: #2c3e50;
  33.     margin-top: 60px;
  34.   }
  35. </style>

然后在main.js里引入

  1. import {
  2.     createApp
  3. } from 'vue'
  4. import App from './App.vue'
  5. import router from './router'
  6. const app = createApp(App)
  7. app.use(router).mount('#app')

那么测试下效果

3.安装使用vuex

npm i vuex@next -S

新增以下文件

配置index.js

  1. import {
  2.     createStore,
  3. } from 'vuex';
  4.  
  5. export default createStore({
  6.     state: {
  7.         test: 0
  8.     },
  9.     mutations: { //同步
  10.         add(state) {
  11.             state.test++
  12.         },
  13.         min(state) {
  14.             state.test--
  15.         },
  16.         set99(state, payload) {
  17.             state.test = payload
  18.         }
  19.     },
  20.     actions: {
  21.         change(context, payload) { //异步
  22.             setTimeout(() => {
  23.                 context.commit('set99', payload)
  24.             }, 1500);
  25.         }
  26.     }
  27. });

 然后在main.js里引入

  1. import {
  2.     createApp
  3. } from 'vue'
  4. import App from './App.vue'
  5. import router from './router'
  6. import store from './store'
  7. const app = createApp(App)
  8. app.use(router).use(store).mount('#app')

在其他页面引入(foo/bar.vue)并查看效果

  1. <template>
  2.     <div>this is foo page</div>
  3.     <p>{{store.state.test}}</p>
  4. </template>
  5. <script setup>
  6.     import {
  7.         useStore
  8.     } from 'vuex'
  9.     const store = useStore()
  10. </script>
  11. <style>
  12. </style>

在其他页面引入并测试方法执行(app.vue) 

  1. <script setup>
  2.   import {
  3.     useRouter
  4.   } from 'vue-router' //引入router
  5.   import {
  6.     useStore
  7.   } from 'vuex' //引入vuex
  8.  
  9.   const router = useRouter()
  10.   const store = useStore()
  11.   //路由跳转测试
  12.   function toFoo() {
  13.     router.push({
  14.       path: '/foo'
  15.     })
  16.   }
  17.  
  18.   function toBar() {
  19.     router.push({
  20.       path: '/bar'
  21.     })
  22.   }
  23.   //修改数据func测试
  24.   function addState() {
  25.     store.commit('add')
  26.   }
  27.  
  28.   function minState() {
  29.     store.commit('min')
  30.   }
  31.   //异步func测试
  32.   function changeState() {
  33.     store.dispatch('change', 99)
  34.   }
  35. </script>
  36.  
  37. <template>
  38.   <div>
  39.     <img alt="Vue logo" src="./assets/logo.png" />
  40.   </div>
  41.   <button @click="toFoo">to foo</button>
  42.   <button @click="toBar">to bar</button>
  43.   <router-view></router-view>
  44.   <div>
  45.     <button @click="addState">add</button>
  46.     <button @click="minState">min</button>
  47.     <button @click="changeState">change</button>
  48.   </div>
  49.  
  50. </template>
  51.  
  52. <style>
  53.   #app {
  54.     text-align: center;
  55.     color: #2c3e50;
  56.     margin-top: 60px;
  57.   }
  58. </style>

效果如下的话,那么vuex就算引入成功了

4.安装使用axios

npm install axios

然后添加配置文件

 编辑apiManager.js 用来配置请求设置

  1. import axios from 'axios';
  2. class ApiHost {
  3.     constructor(baseUrl, name, baseOptions) {
  4.         this.name = name;
  5.         this.axiosInstance = axios.create({
  6.             baseURL: baseUrl,
  7.             withCredentials: false,
  8.         });
  9.         this.baseUrl = baseUrl;
  10.         this.baseOptions = baseOptions;
  11.         //拦截器,用户识别需不需要token
  12.         this.axiosInstance.interceptors.request.use(
  13.             config => {
  14.                 let token = window.localStorage.getItem('token')
  15.                 if (token && config.url.indexOf('login') == -1) {
  16.                     config.headers.token = token
  17.                 }
  18.                 return config;
  19.             },
  20.             error => {
  21.                 return error;
  22.             }
  23.         )
  24.     }
  25.  
  26.     call(path, method, urlParams, bodyParams, options) {
  27.         let configs = {
  28.             url: `${path}`,
  29.             params: urlParams,
  30.             method,
  31.             data: bodyParams
  32.         };
  33.         return new Promise((resolve, reject) => {
  34.             this.axiosInstance
  35.                 .request(configs)
  36.                 .then(res => {
  37.                     if (res.data.code == '200' || res.data.code == '0') {
  38.                         resolve(res.data);
  39.                     } else {
  40.                         reject(res.data)
  41.                     }
  42.                 })
  43.                 .catch(error => {
  44.                     reject(error);
  45.                 });
  46.         })
  47.     }
  48.  
  49.     get(path, urlParams, options) {
  50.         return this.call(path, 'get', urlParams, null, options);
  51.     }
  52.     delete(path, urlParams, bodyParams, options) {
  53.         return this.call(path, 'delete', urlParams, bodyParams, options);
  54.     }
  55.  
  56.     post(path, bodyParams, options) {
  57.         return this.call(path, 'post', null, bodyParams, options);
  58.     }
  59.  
  60.     put(path, bodyParams, options) {
  61.         return this.call(path, 'put', null, bodyParams, options);
  62.     }
  63.  
  64.     patch(path, bodyParams, options) {
  65.         return this.call(path, 'patch', null, bodyParams, options);
  66.     }
  67. }
  68.  
  69. export default class {
  70.     static getApiHost(baseUrl, name, baseOptions) {
  71.         return new ApiHost(baseUrl, name, baseOptions);
  72.     }
  73. }

编辑index.js用于导出所有请求

  1. import ApiManager from '../api/ApiManager'
  2. const apiManager = ApiManager.getApiHost("", "");
  3. //admin-auth-center/login         用户登录
  4. export function userLogin(data) {
  5.     return apiManager.post('你的baseURL' + "你的接口路径", data)
  6. }

然后我们在app.vue里做一个测试

  1. <script setup>
  2.   import {
  3.     useRouter
  4.   } from 'vue-router' //引入router
  5.   import {
  6.     useStore
  7.   } from 'vuex' //引入vuex
  8.   import { //引入生命周期函数--------------------添加内容
  9.     onMounted
  10.   } from 'vue';
  11.   import { //引入定义的请求--------------------添加内容
  12.     userLogin
  13.   } from './api/index'
  14.   const router = useRouter()
  15.   const store = useStore()
  16.   //发请求--------------------添加内容
  17.   onMounted(() => {
  18.     userLogin({
  19.      //你的请求字段
  20.     }).then(res => {
  21.       console.log(res);
  22.     }).catch(error => {
  23.       console.log(error);
  24.     })
  25.   })
  26.   //路由跳转测试
  27.   function toFoo() {
  28.     router.push({
  29.       path: '/foo'
  30.     })
  31.   }
  32.  
  33.   function toBar() {
  34.     router.push({
  35.       path: '/bar'
  36.     })
  37.   }
  38.   //修改数据func测试
  39.   function addState() {
  40.     store.commit('add')
  41.   }
  42.  
  43.   function minState() {
  44.     store.commit('min')
  45.   }
  46.   //异步func测试
  47.   function changeState() {
  48.     store.dispatch('change', 99)
  49.   }
  50. </script>
  51.  
  52. <template>
  53.   <div>
  54.     <img alt="Vue logo" src="./assets/logo.png" />
  55.   </div>
  56.   <button @click="toFoo">to foo</button>
  57.   <button @click="toBar">to bar</button>
  58.   <router-view></router-view>
  59.   <div>
  60.     <button @click="addState">add</button>
  61.     <button @click="minState">min</button>
  62.     <button @click="changeState">change</button>
  63.   </div>
  64.  
  65. </template>
  66.  
  67. <style>
  68.   #app {
  69.     text-align: center;
  70.     color: #2c3e50;
  71.     margin-top: 60px;
  72.   }
  73. </style>

那么如果控制台打印了请求结果,就算成功拉

5.安装使用element-plus

先npm安装一下,然后我们直接走按需引入路线

npm install element-plus --save

安装按需引入的插件

npm install -D unplugin-vue-components unplugin-auto-import

然后去编辑vite.config.js

  1. import {
  2.   defineConfig
  3. } from 'vite'
  4. import vue from '@vitejs/plugin-vue'
  5. import Components from 'unplugin-vue-components/vite'//这里
  6. import AutoImport from 'unplugin-auto-import/vite'//这里
  7. import {
  8.   ElementPlusResolver
  9. } from 'unplugin-vue-components/resolvers'//这里
  10. // https://vitejs.dev/config/
  11. export default defineConfig({
  12.   plugins: [vue(),
  13.     AutoImport({//这里
  14.       resolvers: [ElementPlusResolver()],
  15.     }),
  16.     Components({//这里
  17.       resolvers: [ElementPlusResolver()],
  18.     }),
  19.   ]
  20. })

那么到这里我们就成功完成按需引入了,不再需要在每个页面单独进行引入了,

下面写点内容进行测试,直接在app.vue页面测试就行了

先在dom里写个el-button看能不能显示,位置随便啊自己好找就行

<el-button type="primary">ele-test</el-button>

然后再在之前写请求的地方测试下ElMessage在没有单独引入的情况下能不能使用

  1.  onMounted(() => {
  2.     ElMessage({
  3.       message: 'element-plus按需引入成功',
  4.       type: 'success',
  5.     })
  6.   })

ojbk

6.发版准备工作

今天有点早..就再写一点培训机构和网上视频不怎么说的内容

项目搭起来之后可以内网发版看下效果了,我们做一下准备工作

首先前往路由index页面写一下路由history模式路径,

  1. import {
  2.     createRouter,
  3.     createWebHistory
  4. } from 'vue-router'
  5.  
  6. const routerHistory = createWebHistory('/aProject/')//这里
  7. const router = createRouter({
  8.     history: routerHistory,
  9.     routes: [{
  10.         path: '/',
  11.     }, {
  12.         path: '/foo',
  13.         component: () => import('../views/foo.vue')
  14.     }, {
  15.         path: '/bar',
  16.         component: () => import('../views/bar.vue')
  17.     }]
  18. })
  19. export default router

 然后再修改vite.config.js内容,配置项目部署基础目录,地址和刚刚配置的路由路径一致

  1. import {
  2.   defineConfig,
  3.   loadEnv
  4. } from 'vite'
  5. import vue from '@vitejs/plugin-vue'
  6. import Components from 'unplugin-vue-components/vite'
  7. import AutoImport from 'unplugin-auto-import/vite'
  8. import {
  9.   ElementPlusResolver
  10. } from 'unplugin-vue-components/resolvers'
  11. // https://vitejs.dev/config/
  12. export default defineConfig({
  13.   base: '/aProject/',//这里
  14.   plugins: [vue(),
  15.     AutoImport({
  16.       resolvers: [ElementPlusResolver()],
  17.     }),
  18.     Components({
  19.       resolvers: [ElementPlusResolver()],
  20.     }),
  21.   ]
  22. })

之后再修改一下.gitignore文件,默认是不上传dist文件夹的 我们需要修改一下

  1. node_modules
  2. .DS_Store
  3. #dist//可以加#号也可以直接删除本行
  4. dist-ssr
  5. *.local

然后命令行运行build,就可以让运维把按dist文件夹部署项目了

npm run build

 这两天有空我再写一下不同环境的分包和vite.config的配置,觉得有用的朋友记得点赞哦

未完待续....

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/225683
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号