前端vue3搭建超详细指南(快速上手搭建)

这篇文章主要介绍了使用Vue 3和Element-plus搭建前端项目的过程,包括项目搭建、Element-plus安装和引入、axios安装、sass使用、app.vue配置、组件创新、路由配置以及使用辅助插件来提高开发效率,需要的朋友可以参考下

一、项目搭建和运行

1.选择在哪个文件夹创建

(我在D盘新建的前端项目->cd 前端项目或者直接用idea直接打开该文件夹)

cd /cd 前端项目

2.创建vue项目

npm create vue@latest

3.在该路径下创建我的项目文件名

(这里我的名称是VueProject，给自己项目起个名称)

VueProject(项目名称大写的话会让你选择包，直接回车就行，或者直接使用小写名称vueProject)

 VueProject

4.配置选择

其中路由Vue Router、全局Pinia和代码格式化工具Prettier是需要的选是，ES检查打开后会检查代码质量(自己开发的话不建议打开会增加额外的调整)，其它的暂时不需要

5.切换到我项目的路径

cd VueProject

6.安装项目依赖包

npm install

7.启动运行

(npm run dev或者右击package.json->显示npm脚本->点击dev)

npm run dev

搭建截图如下：

运行截图如下：

二、Elememt-plus的安装和引入

1.安装组件库和图标库

npm install element-plus  //安装 Element Plus 组件库npm install @element-plus/icons-vue //安装 Element Plus 的图标库

2.在main.js中引入

//引入 Element Plus 组件库及其样式文件import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'//引入 Element Plus 的所有图标库import * as ElementPlusIconsVue from '@element-plus/icons-vue'

3.引入完注册

(在app.mount('#app')前面)

app.use(ElementPlus)  //将 Element Plus 注册为 Vue 应用的插件，使其所有组件在应用中可用//循环遍历 ElementPlusIconsVue 对象中的所有图标组件，并将每个图标组件注册到 Vue 应用中for (const [key, component] of Object.entries(ElementPlusIconsVue)) {    app.component(key, component)}

命令截图如下：

main.js截图如下：

三、axios的安装

1.安装

npm install axios

2.引入

(在main.js中配置,8080为后端的端口,获取数据用的,看后端启动使用的端口是哪个)

import axios from 'axios'axios.defaults.baseURL = 'http://localhost:8080'

四、sass安装

(拓展了css,允许嵌套写法，可以更清晰地表示层级结构,<style scoped lang="scss">)

npm install sass

五、app.vue配置一级路由出口

(这里只是做了个样子,头部导航不是固定格式，可根据自己需求调整,其中一级出口<RouterView/>是必要的)

<template>  <div>    <!--头部导航-->    <!--<Header/>-->    <!--主要内容显示 一级路由出口-->    <div class="content">      <RouterView #default="{ Component }">        <!--生命周期-->        <transition name="fade" >          <component :is="Component" />        </transition>      </RouterView>    </div>  </div></template><script setup>import {RouterView} from "vue-router";/*import Header from "@/views/Header.vue";*/</script><style scoped lang="scss"></style>

六、删掉没用的组件，创新组件

1.删除vue组件

2.css内容清空

(该步骤可将默认css全部清空或者把app.vue的全局样式引入import './assets/main.css'删了,建议删main.css里面的全部初始样式)

3.新建目录

4.新建组件

5.命名

6.写入内容

七、路由配置

(可直接拷贝进去)

import { createRouter, createWebHistory } from 'vue-router'const router = createRouter({  history: createWebHistory(import.meta.env.BASE_URL),  routes: [    {      path: '/:pathMatch(.*)*',      redirect: '/login'    },    {      path: '/login',      name: 'login',      component: () => import('../views/Login/HomePage.vue')    }  ],})export default router

截屏如下：