从 0 搭建 Vite 3 + Vue 3 Js版 前端工程化项目

之前分享过一篇vue3+ts+vite构建工程化项目的文章，针对小的开发团队追求开发速度，不想使用ts想继续使用js，所以就记录一下从0搭建一个vite+vue3+js的前端项目，做记录分享。

技术栈

• Vite 3 - 构建工具

• Vue 3

• Vue Router - 官方路由管理器

• Pinia -  Vue Store你也可以选择vuex

• element-plus - UI组件库

• Sass - CSS 预处理器

• Axios - 一个基于 promise 的网络请求库，可以用于浏览器和 node.js

• Vscode - 一个还挺好用的开发工具

一、项目的基础搭建

1、构建有多种方式，本次示例选择vue 官方脚手架工具create-vue 构建的

（1）使用vite的方式，构建一个基础模板

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

 （2）使用vue官方脚手架，本教程使用此方式

npm init vue@latest

 二、安装UI组件库

安装css预处理器sass

npm install -D sass
或
npm add -D sass

1、在项目中安装element-plus

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

2、在mian.ts中引入并配置element-plus（完整引入）element-plus连接

import { createApp } from "vue";
import { createPinia } from "pinia";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";
import router from "./router";
 
import "./assets/main.css";
 
const app = createApp(App);
 
app.use(createPinia());
app.use(router);
 
app.use(ElementPlus);
 
app.mount("#app");

 3、按需导入，自动导入（推荐，此教程使用此方法）以下摘自element

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

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

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

Vite

// 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()],
    }),
  ],
})

4、在组件中使用

效果：

 5、全局配置elementPlus  size 和 zIndex 语言等

三、安装自动导入插件