专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

前端开发从零搭建VUE后台

ins518 2024-11-21 16:18:12 技术文章 9 ℃ 0 评论

从本文开始,笔作将从零开始一步步搭建一个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。 下一篇将带领搭建

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


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

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表