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

标题: 从零开始创建vue3项目——包罗项目初始化、element-plus、eslint、axios、r [打印本页]
作者: 立聪堂德州十三局店    时间: 2024-8-20 20:53
标题: 从零开始创建vue3项目——包罗项目初始化、element-plus、eslint、axios、r
项目启动

初始化vue3项目

可以在命令行输入下面的指令以切换到淘宝镜像源
npm config set registry https://registry.npm.taobao.org
根据自己的需要选择安装插件即可

  1. cd vue-demo
  2. pnpm install
  3. pnpm dev
复制代码
即可运行项目

页面中的都是vue官网链接以及一些提示，感爱好的可以自己看看
设置Element-plus

ement-plus官网链接
  1. // vite.config.js
  2. import { defineConfig } from 'vite'
  3. import AutoImport from 'unplugin-auto-import/vite'
  4. import Components from 'unplugin-vue-components/vite'
  5. import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
  7. export default defineConfig({
  8.   // ...
  9.   plugins: [
  10.     // ...
  11.     AutoImport({
  12.       resolvers: [ElementPlusResolver()],
  13.     }),
  14.     Components({
  15.       resolvers: [ElementPlusResolver()],
  16.     }),
  17.   ],
  18. })
复制代码
  1. <script setup>
  2. import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
  3. </script>
  5. <template>
  6.   <!-- App.vue只需要留一个路由出口 -->
  7.   <el-config-provider :locale="zhCn">
  8.     <router-view></router-view>
  9.   </el-config-provider>
  10. </template>
复制代码
设置eslint

  1. /* eslint-env node */
  2. require('@rushstack/eslint-patch/modern-module-resolution')
  4. module.exports = {
  5.   root: true,
  6.   extends: [
  7.     'plugin:vue/vue3-essential',
  8.     'eslint:recommended',
  9.     '@vue/eslint-config-prettier/skip-formatting'
  10.   ],
  11.   parserOptions: {
  12.     ecmaVersion: 'latest'
  13.   },
  14.   rules: {
  15.     //禁用格式化插件 format on save关闭
  16.     //安装Eslint 并配置保存时自动修复
  17.     'prettier/prettier': [
  18.       'warn',
  19.       {
  20.         singleQuote: true, // 单引号
  21.         semi: false, // 无分号
  22.         printWidth: 80, // 每行宽度至多80字符
  23.         trailingComma: 'none', // 不加对象|数组最后逗号
  24.         endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
  25.       }
  26.     ],
  27.     'vue/multi-word-component-names': [
  28.       'warn',
  29.       {
  30.         ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）
  31.       }
  32.     ],
  33.     'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验
  34.     'no-undef': 'error'
  35.   },
  36.   globals: {
  37.     ElMessage: 'readonly',
  38.     ElMessageBox: 'readonly',
  39.     ElLoading: 'readonly'
  40.   }
  41. }
复制代码
设置axios

  1. import axios from 'axios'
  3. //请求基地址
  4. const baseURL = ''
  6. const instance = axios.create({
  7.   // TODO 1. 基础地址，超时时间
  8.   baseURL,
  9.   timeout: 1000000
  10. })
  12. //响应拦截器
  13. instance.interceptors.response.use(
  14.   (res) => {
  15.     // TODO 3. 处理业务失败
  16.     // TODO 4. 摘取核心响应数据
  17.     if (res.data.code === 0) {
  18.       return res
  19.     }
  20.     //处理业务失败，给错误提示
  21.     ElMessage.error(res.data.message || '服务异常')
  22.     return Promise.reject(res.data)
  23.   },
  24.   (err) => {
  25.     //错误默认情况 => 只给提示就行
  26.     ElMessage.error(err.response.data.message || '服务异常')
  27.     return Promise.reject(err)
  28.   }
  29. )
  31. export default instance
  32. export { baseURL }
复制代码
设置router

  1. import { createRouter, createWebHistory } from 'vue-router'
  2. //createRoute用于创建路由示例
  3. //配置history模式
  4. //1. createWebHistory  地址栏不带#
  5. //2. createWebHashHistory   地址栏带#
  6. const router = createRouter({
  7.   history: createWebHistory(import.meta.env.BASE_URL),
  8.   routes: [
  9.     {
  10.       path: '/',
  11.       component: () => import('@/views/layout/LayoutContainer.vue'),
  12.       // 默认跳转
  13.       redirect: '/index/UserManagement',
  14.       children: [
  15.         {
  16.           path: '/index/UserManagement',
  17.           component: () => import('@/views/index/UserManagement.vue')
  18.         }
  19.       ]
  20.     }
  21.   ]
  22. })
  24. export default router
复制代码
设置pinia

  1. import { createPinia } from 'pinia'
  2. import persist from 'pinia-plugin-persistedstate'
  4. const pinia = createPinia()
  5. pinia.use(persist)
  7. export default pinia
  9. export * from './modules/user'
复制代码
  1. import { defineStore } from 'pinia'
  2. import { ref } from 'vue'
  4. //本案例为用户模块，可以自己根据需要更改，demoname也根据实际修改
  5. export const useUserStore = defineStore(
  6.   'demoname',
  7.   () => {
  8.     //自定义属性名
  9.     const token = ref('')
  10.     //自定义方法
  11.     const setToken = (newToken) => {
  12.       token.value = newToken
  13.     }
  14.     const removeToken = () => {
  15.       token.value = ''
  16.     }
  17.     //记得return暴露自定义的属性和方法
  18.     return {
  19.       token,
  20.       setToken,
  21.       removeToken
  22.     }
  23.   },
  24.   //持久化
  25.   {
  26.     persist: true
  27.   }
  28. )
复制代码
设置 echarts

echarts官网
  1. import './assets/main.scss'
  3. import { createApp } from 'vue'
  4. import { createPinia } from 'pinia'
  6. import App from './App.vue'
  7. import router from './router'
  9. import ECharts from 'vue-echarts' // 全局引入ECharts
  10. import 'echarts' // 全局引入echarts
  11. // 挂载ECharts   参数1:vue文件中挂载echarts的名字  参数2:挂载的组件
  13. const app = createApp(App)
  15. app.use(createPinia())
  16. app.use(router)
  17. //echarts
  18. app.component('ECharts', ECharts)
  20. app.mount('#app')
复制代码
共勉

有不会的多去官网查找看看，大家一起加油学习吧！

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



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