当前位置: 首页 > article >正文

VUE的脚手架搭建引入类库

VUE的小白脚手架搭建

真的好久好久自己没有发布自己博客了,对于一直在做后端开发的我

,由于社会卷啊卷只好学习下怎么搭建前端,一起学习成长吧~哈哈哈(最终目的,能够懂并简易开发)

文章目录

  • VUE的小白脚手架搭建
    • 1.下载`node.js`
    • 2.安装vue脚手架
    • 3.创建一个项目
    • 4.代码规范约束配置(美化代码)
        • 搜索`eslint`
        • 搜索`prettier`
    • 5.引入组件库
      • 我们引入`Ant Design Vue`
    • 6.全局通用布局

1.下载node.js

下载网址: node.js

点击安装下一步

node -v

D:/docs/Typroa/imgs/image-20250314182354650.png

2.安装vue脚手架

目的是为了让我们能预制加载一些类库,让我们开发达到简化

不需要指定什么文件夹,直接粘贴下面的命令,enter回车即可

npm install -g @vue/cli

在这里插入图片描述

检验是否成功:

D:\projs\vue>vue --version
@vue/cli 5.0.8  ##版本号(出现版本号就是成功)

3.创建一个项目

这边需要选择一个文件夹:

比如我选择的是D:\projs\vue这个文件夹

vue create uesr-center-frontend-vue

出现如下的问题: 选择Y即可

在这里插入图片描述

是否选择使用vue2还是vue3,下面的两种方法,自己选择特性

第一种:

我们默认使用vue3,点击回车就好了

在这里插入图片描述

在这里插入图片描述


第二种:

1.我们选择人工选择安装特性

在这里插入图片描述

2.选择对应的需要的组件,一般我们只需要这些

按空格键选择组件(有*就是选择了),选择好后,按回车就是安装了

在这里插入图片描述

3.选择Vue3

在这里插入图片描述

4.是否使用类组件的语法,我们不使用,选择 n(我们使用其他的)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

5.下面的一系列,按照我下图所配即可

在这里插入图片描述

6.下面的是问你啥时候做语法校验,我们选择保存时做

在这里插入图片描述

7.意思: 使用单独配置,还是混合在一起,

这里为了好管理,我们选择单独的回车

在这里插入图片描述

8.表示是否把上面的我们配置的版本当做预设版本

这里我们选择不保存(下次用下次配)

在这里插入图片描述

9.安装成功

在这里插入图片描述

idea或者webstorm打开点击运行

在这里插入图片描述

4.代码规范约束配置(美化代码)

下面的代码操作后: 按下CTRL+ALT+L,就可以一键美化代码(就是格式对齐的效果)

我们打开settings

搜索eslint

在这里插入图片描述

不想每次运行出现不符合eslint的语法校验错误,可以进行如下的配置

vue.config.js中添加lintOnSave: "warning",

在这里插入图片描述

搜索prettier

下面的5步操作完成后,点击apply即可

在这里插入图片描述

5.引入组件库

我们引入Ant Design Vue

可以直接参考​ant design vue​的官网,里面啥都有

安装ant design vue组件的命令

##最新的版本
npm i --save ant-design-vue@next
##具体的版本
npm i --save ant-design-vue@4.x 

在这里插入图片描述

如果上面的安装出现错误,运行如下命令

npm audit fix --force

在项目中全局配置: 目的是为了我们后面用到这些组件

在这里插入图片描述

有个坑: 上面

安装完 antd 为什么 dist 下面没有 antd.css 文件?因为最新版本不需要 import'ant-design-vue/dist/antd.css';

去除掉就可以了

在这里插入图片描述

如何证明我们安装好了呢?

随便选择一个组件,进行安装就可以

如添加一个按钮

 <a-button type="primary" danger>Primary</a-button>

在这里插入图片描述

6.全局通用布局

就是页面上不会变的总布局,如顶部的菜单栏

我们建一个layouts文件夹.然后新建一个BasicLayout.vue的组件

在这里插入图片描述

代码

<template>
  <div class="basic-layout">我们测试下,你好,vue</div>
</template>

<script setup lang="ts"></script>

<style scoped></style>

我们在根页面src/App.vue引入通用布局

在这里插入图片描述

代码

<template>
  <div id="app">
    <BasicLayout />
  </div>
</template>

<style></style>
<script setup lang="ts">
import BasicLayout from "@/layouts/BasicLayout.vue";
</script>

在这里插入图片描述

还有,还在更关于与后端的交互

在这里插入图片描述


http://www.kler.cn/a/585376.html

相关文章:

  • 课上测试:MIRACL共享库使用测试
  • Matlab 灰度质心+抛物线拟合提取条纹中心
  • 黑马JUC学习笔记-上
  • 优化Go错误码管理:构建清晰、优雅的HTTP和gRPC错误码规范
  • Java通过Apache POI操作Excel
  • 正则表达式入门及常用的正则表达式
  • 封装WPF中转换器常用用法封装
  • 在PowerShell脚本中编辑appsettings.json
  • Qt QML实现鼠标自由选择不规则区域进行截图
  • Quickwit+Jaeger+Prometheus+Grafana搭建Java日志管理平台
  • 大数据学习(68)- Flink和Spark Streaming
  • [c语言日寄]字符串进阶:KMP算法
  • 使用Python编写网络爬虫:从入门到实践
  • 【Rust】枚举和模式匹配——Rust语言基础14
  • 【软设中级】软件设计师中级专题复习:(专题二)程序语言部分
  • 10个数据收集相关DeepSeek提示词
  • Github 2025-03-14 Java开源项目日报 Top10
  • python 基于混合式推荐算法的学术论文投稿系统
  • QT 学习一 paintEvent,QPainter ,QImage
  • 使用Python和OpenCV进行计算机视觉处理