从本文开始，笔作将从零开始一步步搭建一个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-plusyarn 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.jsimport { 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。 下一篇将带领搭建引入一些我们需要的插件，和搭建后台的基础轮廓。创作需要鼓励，原创需要分享。您的鼓励与分享是我最大的动力。