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>

還有,還在更關于與后端的交互