从0~1使用vite搭建一个Vue3.x项目

一、搭建一个vite项目

注意 : Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

创建项目

• 使用npm

npm create vite@latest

• 使用yarn

yarn create vite

• 使用pnpm

pnpm create vite

输入完命令之后等待片刻，出现如下视图，进行设置项目名称，按回车。

出现以下视图，按上下键来切换，选择你所想要创建的框架

出现一下视图选择你想要的语言类型

出现一下视图就证明项目创建完成。依次输入提示命令。此时一个属于你的vue3.x项目就已经搭建完毕。

在项目中集成elementUIPlus组件库

1. 安装

pnpm install element-plus

2.开始引入

这里我们使用vite官方推荐的自动导入

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

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

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

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

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

到此你就可以在你的vue3.x项目中使用elementUiPlus组件了

3. 国际化

Element Plus 提供了全局配置国际化的配置。

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

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

4. 使用elementUiPlus提供的图标

下载安装依赖

pnpm install @element-plus/icons-vue

使用

• 图标作为属性值使用（分别引入）

<!--分别引入-->
@xxx.vue文件

import { Delete } from "@element-plus/icons-vue";
<el-button type="primary" :icon="Delete">Primary</el-button>

• 图标直接使用标签（全局引入）

@main.js

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

@xxx.vue

<el-icon>
  <Plus></Plus>
</el-icon>

5.路径别名配置

@ vite.config.ts
//引入路径模块
import path from 'path'

export default defineConfig({
  ···
  resolve: {
    alias: {
      "@": path.resolve('./src')
    }
  }
})


@ tsconfig.json
{
  "compilerOptions": {
       ···
    "baseUrl":"./", //解析非相对模块的基地址,默认是当前目录
    "paths":{
      "@/":["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }],
}

6. 环境变量配置

创建如下图所示与src同层级的文件

在main.ts文件直接打印即可

console.log('import', import.meta.env);

7.项目中使用SvgIcon图标

• 下载依赖

yarn add vite-plugin-svg-icons -D 
# or 
npm i vite-plugin-svg-icons -D 
# or 
pnpm install vite-plugin-svg-icons -D

• vite.config.ts 中的配置插件

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

createSvgIconsPlugin({

        // 指定需要缓存的图标文件夹
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // 指定symbolId格式
        symbolId: 'icon-[dir]-[name]',

        /**
         * 自定义插入位置
         * @default: body-last
         */
        // inject?: 'body-last' | 'body-first'
        /**
         * custom dom id
         * @default: __svg__icons__dom__
         */
        // customDomId: '__svg__icons__dom__',
      })

• icons文件结构

• 在 src/main.js 内引入注册脚本

import 'virtual:svg-icons-register'

• 封装公共组件

// src/components/SvgIcon.vue


<template>

  <svg

    aria-hidden="true"

    class="svg-icon"

    :width="props.size"

    :height="props.size"

  >

    <use :xlink:href="symbolId" :fill="props.color" />

  </svg>

</template>

<script lang="ts">

export default {

  name: "SvgIcon",

};

</script>

<script setup lang="ts">

import { computed } from "vue";

const props = defineProps({

  prefix: {

    type: String,

    default: "icon",

  },

  name: {

    type: String,

    required: true,

  },

  color: {

    type: String,

    default: "#333",

  },

  size: {

    type: String,

    default: "1em",

  },

});

const symbolId = computed(() => `#${props.prefix}-${props.name}`);

</script>

 
<style lang="less" scoped></style>

• 全局注册公共组件

<!--@/components/index.ts-->
import SvgIcon from "./SvgIcon.vue";
const allGloablComponent: any = { SvgIcon }
export default {
  install(app: any) {
    Object.keys(allGloablComponent).forEach(key => {
      console.log('aa', app);

      app.component(key, allGloablComponent[key])
    })
  }
}

• 在main.js文件中引入脚本

import '@/components/index.ts'

• 在组件中使用

 <SvgIcon :name="'icon2'" :size="'46px'" :color="'yellow'"></SvgIcon>

package.json文件配置说明

• 在package.json文件中添加添加如图所示--open,当我们运行项目是自动打开浏览器窗口。