Vue3环境配置

第一步：在vscode中安装Vue-Offcial插件

安装pnpm：npm install -g pnpm

第二步：创建vue项目：

pnpm create vue

第三步：配置Eslint和Prettier：

在vscode中安装ESlint插件，在.eslintrc.cjs中

，
  rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true,
        semi: false,
        printWidth: 80,
        trailingComma: 'none',
        endOfLine: 'auto'
      }
    ],
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index']
      }
    ],
    'vue/no-setup-props-destructure': ['off'],
    'no-undef': 'error'
  },
  // 配置全局变量
  globals: {
    ElMessage: 'readonly',
    ElMessageBox: 'readonly',
    ElLoading: 'readonly'
  }

在vscode的设置中配置

    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    "editor.formatOnSave": false

第四步：在vscode的git bash终端中（需下载git）安装husky（切换到对应的文件中）。

git init

pnpm dlx husky-init && pnpm install

pnpm i lint-staged -D

在package.json中配置

  "scripts": {
,
    "lint-staged": "lint-staged"
  },
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
    ]
  },

在.husky文件夹中的pre-commit中配置

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

pnpm lint-staged

第五步：全局样式处理：

pnpm add sass

在styles文件夹中添加.scss文件

修改element样式

/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      // 主色
      'base': #27ba9b,
    ),
    'success': (
      // 成功色
      'base': #1dc779,
    ),
    'warning': (
      // 警告色
      'base': #ffb302,
    ),
    'danger': (
      // 危险色
      'base': #e26237,
    ),
    'error': (
      // 错误色
      'base': #cf4444,
    ),
  )
);

重置样式

// 重置样式
* {
  box-sizing: border-box;
}

html {
  height: 100%;
  font-size: 14px;
}
body {
  height: 100%;
  color: #333;
  min-width: 1240px;
  font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI',
    'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei',
    sans-serif;
}
body,
ul,
h1,
h3,
h4,
p,
dl,
dd {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
  color: #333;
  outline: none;
}
i {
  font-style: normal;
}
input[type='text'],
input[type='search'],
input[type='password'],
input[type='checkbox'] {
  padding: 0;
  outline: none;
  border: none;
  -webkit-appearance: none;
  &::placeholder {
    color: #ccc;
  }
}
img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
  background: #ebebeb url('@/assets/images/200.png') no-repeat center / contain;
}
ul {
  list-style: none;
}

#app {
  background: #f5f5f5;
  user-select: none;
}

.container {
  width: 1240px;
  margin: 0 auto;
  position: relative;
}
.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ellipsis-2 {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.clearfix:after {
  content: '.';
  display: block;
  visibility: hidden;
  height: 0;
  line-height: 0;
  clear: both;
}

// reset element
.el-breadcrumb__inner.is-link {
  font-weight: 400 !important;
}

自定义样式

$xtxColor: #27ba9b;
$helpColor: #e26237;
$sucColor: #1dc779;
$warnColor: #ffb302;
$priceColor: #cf4444;

在main.js中

import '@/styles/common.scss'

在vite.js中

  css: {
    preprocessorOptions: {
      scss: {
        // 2. 自动导入定制化样式文件进行样式覆盖
        additionalData: `
          @use "@/styles/element/index.scss" as *;
          @use "@/styles/var.scss" as *;
        `
      }
    }
  }

第六步：配置router

在router文件夹中的index.js中

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),

  //配置你的具体的路由
  routes: [
    { path: '/login', component: () => import('@/views/login/LoginPage.vue') }, // 登录页
    {
      path: '/',
      component: () => import('@/views/layout/LayoutContainer.vue'),
      redirect: '/article/manage',
      children: [

      ]
    }
  ]
})

  router.beforeEach((to) => {
    // 如果没有token, 且访问的是非登录页，拦截到登录，其他情况正常放行
    const userInfoStore = useUserInfoStore()
    if (!userInfoStore.token && to.path !== '/login') {
      userInfoStore.userInfo = null
      ElMessage.error('用户身份已过期~')
      return '/login'
    }
  })
export default router

在app.vue中

<script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs' // 导入中文包
</script>

<template>
  <div>
    <!-- App.vue 只需要留一个路由出口 router-view即可 -->
    <!-- 包裹住路由主出口 -->
    <el-config-provider :locale="zhCn">
      <router-view></router-view>
    </el-config-provider>
  </div>
</template>

<style scoped></style>

第七步：引入Element Plus

pnpm install element-plus

pnpm i @element-plus/icons-vue

pnpm add -D unplugin-vue-components unplugin-auto-import

在vite.config.js中配置

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
      imports: ['vue', 'vue-router'],
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

第八步：pinia持久化

pnpm add pinia-plugin-persistedstate -D

在main.js中

import persist from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(persist)
app.use(pinia)

在想持久化的数据下加上

import { defineStore } from 'pinia'

export ..........=....({
    persist: true
  })

第九步：配置axios

pnpm install axios

在utils文件夹中创建.js文件

import axios from 'axios'
import { ElMessage } from 'element-plus'
import { useUserInfoStore } from '../stores/UserInfoStore'

const baseURL = '/api'
const instance = axios.create({
  //1. 基础地址,超时时间
  baseURL,
  timeout: 10000
})

const userInfoStore = useUserInfoStore()
// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    const token = userInfoStore.userInfo ? userInfoStore.userInfo.token : null
    if (token) {
      // 为请求头挂载 Authorization 字段
      config.headers.Authorization = token
    }
    return config
  },
  (error) => {
    Promise.reject(error)
  }
)
// 2.定义"响应"拦截器(后端服务器给前端的响应)
instance.interceptors.response.use(
  // 响应http状态码为 2xx,3xx 时触发成功的回调，形参中的 response 是“成功的结果”
  (response) => {
    // console.log('------响应拦截器-------')
    console.log(response)
    // 如果返回的data里有状态码code并且不是0，说明后端返回了错误信息（token过期等），这时候要给前端提示错误信息
    if ('code' in response.data && response.data.code !== 0) {
      // "xxx已存在" 等各种重复错误，后端有返回提示信息，此处在前端用ElMessage做统一拦截提示
      ElMessage.error(response.data.msg)
    }
    // 对响应的response先在上面拦截处理，最后再放行，返回response
    return response
  },
  // 响应状态码是 4xx,5xx 时触发失败的回调
  (error) => {
    return Promise.reject(error)
  }
)

export default instance
export { baseURL }

vite中

  server: {
    proxy: {
      '/api': {
        //与tomcat端口号对应
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },

（可选）:年月日标准化显示

在utils下创建format.js

import { dayjs } from 'element-plus'

export const formatTime = (time) => dayjs(time).format('YYYY年MM月DD天')

在需要使用的文件中

import { formatTime } from '@/utils/format'


.....
      <el-table-column label="发表时间">
        <template #default="{ row }">{{ formatTime(row.pub_date) }} </template>
      </el-table-column>

富文本：

pnpm add @vueup/vue-quill@latest

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

......
          <div class="editor">
            <quill-editor
              content-type="html"
              theme="snow"
            ></quill-editor>
          </div>



.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}