vue3项目初始化

项目创建

方式一 vite 初始化创建
pnpm create vite 或者 npm create vite@latest
方式二 vue脚手架创建
vue create xxproject

2.安装
npm i

项目配置

配置默认打开浏览器

修改package.json


  "scripts": {
    "dev": "vite --open",    加入--open

安装eslint

pnpm i eslint -D
生成配置文件
npx eslint --init 或 npm init @eslint/config@latest
选 To check syntax and find problems

配置eslint-prettier

配置stylelint

配置husky

配置commitlint

强制pnpm包管理

编写一个js

if (!/pnpm/.test(process.env.npm_execpath || ''){
    console.warn(
        `\u001b[33m This repository must using pnpm as the package manager ` +
           `for scripts to work properly. \u001b[39m\n`
    )
    process.exit(1)
}

修改package.js

 "preinstall": "node ./scripts/preinstall.js"

preinstall npm 提供的生命周期

引入elment-plus

pnpm install element-plus

修改main.ts

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// 使用插件
app.use(ElementPlus);

安装图标
执行命令
pnpm i @element-plus/icons-vue

使用示例

<template>
  <div>
      <el-button type="primary" size="default" @click="" :icon="Plus">主要按钮</el-button>
  </div>
</template>

<script setup lang="ts">
// 引入图标
import {Plus} from '@element-plus/icons-vue'
</script>
<style scoped></style>

国际化配置

修改 main.ts

//@ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

app.use(ElementPlus,{
  locale:zhCn
})

忽略检测 //@ts-ignore

src别名

修改vite.config.ts

import path from "path";

defineConfig({
    alias: {
      "@": path.resolve("./src"), // 使用@ 替代src
    },

修改tsconfig.json

"compilerOptions":{
    "baseUrl": "./",
    "paths": {
      "@/*":["src/*"]
    }
}

环境配置

开发环境

测试环境
生产环境
环境文件示例 .dev.development 文件

# 变量必需是  VITE_ 前缀才能暴露给外部读取
NODE_ENV = "development"
VITE_APP_TITLE = "xx平台"
VITE_APP_BASE_API = "/dev-api"
VITE_SERVER="http://xx.com"

package.json

    "build:test": "vue-tsc && vite build --mode test",
    "build:pro": "vue-tsc && vite build --mode production",

使用

import.meta.env

SVG 图标

性能好
安装插件

pnpm install vite-plugin-svg-icons -D

在vite.config.ts配置

//  导入 vite-plugin-svg-icons 插件 暴露 createSvgIconsPlugin
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";

export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), "src/assets/icons")],
      symbolId: "icon-[dir]-[name]",
    }),

使用
在src/assets目录下创建icons目录
创建xxx.svg文件在阿里图标库中复制图标的SVG代码

注册为全局组件，任何地方就可以使用

通过自定义插件 install() 来实现注册为全局组件

import SvgIcon from './SvgIcon/Index.vue';
import Pagination from './Pagination/index.vue'

const allGloablComponent = {SvgICon, Pagination};

export default{
    install(app){
        Object.keys(allGloablComponent).forEach(key=>{
            app.component(key,allGloablComponent[key]);
        });
    }
}

集成sass

pnpm add -D sass
复制一个reset.scss的代码
main.ts导入
import '@/styles/index.scss'
sass配置全局变量

mock插件配置

vite-plugin-mock

axios 二次封装

请求拦截器
相应拦截器

统一接口管理

路由配置

vue-router

{{userData.name}}已认证