【第15章】Vue实战篇之环境搭建

你知道“铁甲小宝”吗丶

已于 2024-07-12 22:39:39 修改

阅读量542

点赞数 6

分类专栏： # SpringBoot+Vue3实战文章标签： vue.js 前端 javascript

于 2024-06-17 21:09:39 首次发布

本文链接：https://blog.csdn.net/qq_44824164/article/details/139566287

版权

SpringBoot+Vue3实战专栏收录该内容

29 篇文章 2 订阅

订阅专栏

文章目录

前言
一、创建Vue工程
二、安装依赖
三、目录调整
四、启动
五、展示
总结

前言

从这篇开始我们使用Vue3+Element-Plus搭建前端界面。

一、创建Vue工程

npm init vue@latest

在这里插入图片描述

二、安装依赖

1.安装依赖

cd .\big-event\
npm install

2.Element-Plus

2.1 安装

npm install element-plus --save

2.2 使用

//main.js
import './assets/main.scss'

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

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

3.Axios

npm install axios

4.Sass

npm install sass -D

三、目录调整

此过程主要为删除vue脚手架创建的一些文件和引入项目搭建需要的静态资源文件等；

1. 清除

清除assets、components下文件

2. 调整

main.js上方已经贴了，这里略过

1.1 index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大事件管理系统</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

1.2 App.vue

<script setup>

</script>

<template>
  <h1>爱我中华</h1>
</template>

<style scoped>
  h1{
    color:red;
  }
</style>

四、启动

npm run dev

五、展示

在这里插入图片描述

总结

回到顶部

到这里环境就搭建好了，祝君成功。

你知道“铁甲小宝”吗丶

关注

6
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【第15章】Vue实战篇之环境搭建

从这篇开始我们使用Vue3+Element-Plus搭建前端界面。回到顶部到这里环境就搭建好了，祝君成功。
复制链接

扫一扫

专栏目录