从本文开始，笔作将从零开始一步步搭建一个vue3的后台。喜欢或者感兴趣的朋友可以关注我。

前言

当有些同学还没有开始vue2或者感觉自己vue2还没有完全掌握的时候，vue的作者又发布了

vue3了，作者也说明了vue3的改变是很大的。可以直接学习vue3了。这就给本就没有完全

掌握vue2的同学带来了更大的焦虑了。

在这里笔作就和同学们一起一步步的去了解vue3，去了解vue3和2不同点在哪里。

前端是一个不停的学习，不停的积累过程。加油了～～

VUE3介绍

Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

开始搭建

vue的安装方式很多，我们可以通过官网的来查看具体的方式。今天笔作就采用了cli命令方式为搭建基础的。

搭建命令：

全局安装（已安装的同学可以升级到最新版本）

yarn global add @vue/cli
# 或
npm install -g @vue/cli


笔作采用vite， 其中<project-name>项目名称自行定义
这样一个最基础的vue3项目就搭建起来了

yarn create vite <project-name> --template vue
cd <project-name>
yarn
yarn dev

大致的目录结构：

目录结构已经有了。下面就开始我们的后台搭建了。我们将采用element-plus。（其实不一定非要采用element-plus，看个人喜爱）。

安装element-plus

yarn add element-plus

使用element-plus

// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

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

配置vite.config.js

import { defineConfig } from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
import ElementPlus from 'unplugin-element-plus/vite'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@':`${path.resolve(__dirname, 'src')}`,//定义快捷路径
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        //个人习惯，你可以不是用scss。采用less
        additionalData: '@import "@/assets/scss/global.scss";'
      }
    }
  },
  plugins: [
    vue(),
    ElementPlus(), //引入ElementPlus
  ]
})

这样最基础的vue3就已经搭建好了，并且我们还引入了element-plus。 下一篇将带领搭建

引入一些我们需要的插件，和搭建后台的基础轮廓。

创作需要鼓励，原创需要分享。您的鼓励与分享是我最大的动力。