Plantilla de desarrollo rápido del proyecto Vue3

Plantilla de desarrollo rápido del proyecto Vue3

Introducción

Este proyecto está desarrollado en forma de paquete web vue3 +. Se han introducido funciones comunes. No es necesario configurar enrutamiento, solicitud, pinia, etc. Puede desarrollar la página directamente cuando comience, y está realmente fuera de lo común. caja

Puede acceder directamente a mi almacén para usarlo directamente, o puede seguir el tutorial de este artículo para operarlo usted mismo.

Dirección del almacén: https://gitee.com/szxio/vue3-template.

Si te resulta útil, dale me gusta, márcalo como favorito y síguelo. ❥(^_-)

pila de tecnología

• ver 3
• paquete web
• frijoles
• vue-enrutador4
• elemento-plus
• axios
• i18n
• hablar con descaro a

Proyecto de inicio

Instalar

npm install

correr

npm run serve

Embalar

npm run build

uso de pinia

Instalar

Primero instale las dependencias, este proyecto ya está instalado, lo siguiente es solo un tutorial

npm install pinia

configuración

Nuevo src/store/index.js, el contenido es el siguiente.

import {
    
    createPinia} from 'pinia'

export default createPinia()

main.jsIntroducido en

import {
    
     createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
import pinia from '@/store/index.js'

app.use(pinia)
app.mount('#app')

usar

Nuevo src/store/userInfo.js, el contenido es el siguiente.

import {
    
     defineStore } from 'pinia'

// 第一个参数是应用程序中 store 的唯一 id
export const userInfo = defineStore('userInfo', {
    
    
  state: () => ({
    
    
    userInfo: {
    
    
      name: 'lisi',
      age: 18,
    },
  }),
  actions: {
    
    
    async setUserInfo(data) {
    
    
      this.userInfo = data
    },
  },
})

usar en la pagina

<template>
	<div>
    	{
   
   { store.userInfo.name }}
        <button @click="getClick">修改store</button>
    </div>
</template>

import { userInfo } from '@/store/userInfo'
const store = userInfo()

const getClick = () => {
  store.setUserInfo({
    name: 'wangwu',
  })
}

Configuración de internacionalización

Instalar

npm install vue-i18n

configuración

Nuevo src/i18n/index.js, el contenido es el siguiente.

import {
    
     createI18n } from 'vue-i18n'
import homeEn from './home/en.js'
import homeZh from './home/zh.js'

const messages = {
    
    
  en: {
    
    
    home: {
    
     ...homeEn },
  },
  zh: {
    
    
    home: {
    
     ...homeZh },
  },
}

const language = (navigator.language || 'zh').toLocaleLowerCase() // 这是获取浏览器的语言

const i18n = createI18n({
    
    
  legacy: false,
  locale: localStorage.getItem('i18n') || language.split('-')[0] || 'zh', // 首先从缓存里拿，没有的话就用浏览器语言，
  fallbackLocale: 'zh', // 设置备用语言
  messages,
})

export default i18n

Los documentos en chino e inglés presentados anteriormente son los siguientes

src/i18n/home/en.js

export default {
    
    
  login: 'Log in',
  userName: 'Username',
  password: 'Password',
}

src/i18n/home/zh.js

export default {
    
    
    login: '登录',
    userName: '用户名',
    password: '密码',
}

main.jsIntroducir en el expediente

import {
    
     createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
import i18n from '@/i18n/index.js'

app.use(i18n)
app.mount('#app')

usar

$tNo es necesario introducirlo por separado en js, se ha introducido globalmente, por lo que se puede utilizar directamente en la página aquí.

<template>
    <div>
      {
   
   { $t('home.userName') }}
      <el-button type="primary" @click="switchLanguage">切换语言</el-button>
    </div>
</template>

<script setup>
    const switchLanguage = () => {
      localStorage.setItem('i18n', 'en')
      window.location.reload()
    }
</script>

instalación descarada

Instalar

No se puede instalar una versión superior aquí; de lo contrario, habrá problemas de compatibilidad que harán que el proyecto no se inicie

npm install sass [email protected] [email protected]

configuración

nueva construcciónsrc/assets/style/index.scss

:root {
  --primary-color: #1c82e3;
}

body {
  margin: 0;
  min-height: 100vh;
}

main.jsIntroducido en

import {
    
     createApp } from 'vue'
import App from './App.vue'
import '@/assets/style/index.scss'

const app = createApp(App)
app.mount('#app')

usar

<style scoped lang="scss">
h1{
    
    
  color: var(--primary-color)
}
</style>

Usos de VueRouter4

Instalar

npm install vue-router@4

configuración

// 1.从vue-router导出两个方法使用
import {
    
     createRouter, createWebHashHistory } from 'vue-router'
import Layout from '@/layout/index.vue'

// 2.声明菜单数组
const routes = [
  {
    
    
    path: '/',
    component: Layout,
    redirect: '/home',
    title: '首页',
    children: [
      {
    
    
        path: 'home',
        title: '首页',
        component: import('../view/home/index.vue'),
      },
      {
    
    
        path: 'about',
        title: '关于我',
        component: import('../view/about/index.vue'),
      },
    ],
  },
]

// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = createRouter({
    
    
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})

// 导出路由
export default router

nuevo src/layout/index.vuearchivo

<template>
  <div>
    <div
      class="d-flex flex-justify-center gap-10 bg-yellow-light flex-items-center navtop"
      style="height: 50px"
    >
      <div
        :class="{
          active: route.path === '/home' || route.path === '/',
        }"
        @click="goPage1"
      >
        首页
      </div>
      <div
        :class="{
          active: route.path === '/about',
        }"
        @click="goPage2"
      >
        我的
      </div>
    </div>

    <router-view v-slot="{ Component }">
      <transition name="fade" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { ref, watchEffect } from 'vue'

const route = ref(useRoute())
const router = ref(useRouter())

const goPage1 = () => {
  router.value.push({
    path: '/home',
  })
}

const goPage2 = () => {
  router.value.push({
    path: '/about',
  })
}

// 监听路由
watchEffect(() => {
  console.log(route.value.path, '5555')
})
</script>

<style scoped lang="scss">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.navtop {
  div {
    display: flex;
    align-items: center;
    background-color: #1ab394;
    color: white;
    height: 100%;
    line-height: 100%;
    padding: 0 20px;
  }
}

.active {
  background-color: #1c82e3 !important;
}
</style>

main.jsIntroducido en

import {
    
     createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
import router from '@/router/index.js'

app.use(router)
app.mount('#app')

usar

import {
    
     useRoute, useRouter } from 'vue-router'

const router = ref(useRouter())
const route = ref(useRoute())

// 获取路由信息
const getRouteInfo = () => {
    
    
  console.log(route.value.path)
  console.log(route.value.query)
  console.log(route.value.meta)
}

// 路由跳转并传参
const goAbout = () => {
    
    
  router.value.push({
    
    
    path: '/about',
    query: {
    
    
      id: '1',
    },
  })
}

Uso de ElementPlus

Instalar

npm install element-plus @element-plus/icons-vue

configuración

import {
    
     createApp } from 'vue'
import App from './App.vue'
import '@/assets/style/index.scss'

const app = createApp(App)
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import lang from 'element-plus/lib/locale/lang/zh-cn'

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    
    
  app.component(key, component)
}
app.use(ElementPlus, {
    
    
  locale: lang,
})
app.mount('#app')

usar

<el-button type="primary" @click="showMsg">成功消息</el-button>

import {ElMessage} from "element-plus";
const showMsg = () => {
  ElMessage.success("success")
}

Usos de Axios

Instalar

npm install axios

configuración

nuevo src/utils/request.js:

import axios from 'axios'
import {
    
     ElMessage } from 'element-plus'

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
const service = axios.create({
    
    
  baseURL: process.env.VUE_APP_BASE_API,
})

// request拦截器
service.interceptors.request.use(
  (config) => {
    
    
    return config
  },
  (error) => {
    
    
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  (res) => {
    
    
    // 未设置状态码则默认成功状态
    const code = res.data.code || 200
    // 获取错误信息
    const msg = res.data.msg
    if (code !== 200 && code !== 20000 && code !== 1) {
    
    
      ElMessage.error(msg)
      return Promise.reject('error')
    } else {
    
    
      return res.data
    }
  },
  (error) => {
    
    
    console.log('err' + error)
    let {
    
     message } = error
    if (message === 'Network Error') {
    
    
      message = '后端接口连接异常'
    } else if (message.includes('Request failed with status code')) {
    
    
      message = '系统接口' + message.substr(message.length - 3) + '异常'
    }
    ElMessage({
    
    
      message: message,
      type: 'error',
      duration: 5 * 1000,
    })
    return Promise.reject(error)
  }
)

export default service

establecer proxy, modificarvue.config.js

const port = process.env.port || 10078 // 端口

module.exports = {
    
    
  devServer: {
    
    
    host: '0.0.0.0',
    port: port,
    open: true,
    proxy: {
    
    
      [process.env.VUE_APP_BASE_API]: {
    
    
        target: `http://xxx.xxx.xxx`,
        changeOrigin: true,
        pathRewrite: {
    
    
          ['^' + process.env.VUE_APP_BASE_API]: '',
        },
      },
    },
    disableHostCheck: true,
  },
}

usar

import request from '@/utils/request'

export function testRequestFun() {
    
    
  return request({
    
    
    url: `/homePage/getProcessNode`,
    method: 'get',
  })
}

Configurar el alias @access

Revisarvue.config.js

const path = require('path')

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