欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 文化 > VUE的脚手架搭建引入类库

VUE的脚手架搭建引入类库

2025/3/16 5:05:53 来源:https://blog.csdn.net/weixin_43475992/article/details/146268584  浏览:    关键词: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>

在这里插入图片描述

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

在这里插入图片描述

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词