中软国际软件培训收费广州网站优化推广方案

VUE的小白脚手架搭建

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

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

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>

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