IT评测·应用市场-qidao123.com

标题: VUE的脚手架搭建&引入类库 [打印本页]
作者: 杀鸡焉用牛刀    时间: 2025-3-15 16:38
标题: VUE的脚手架搭建&引入类库
VUE的小白脚手架搭建

   真的很久很久自己没有发布自己博客了,对于一直在做后端开发的我
  ,由于社会卷啊卷只勤学习下怎么搭建前端,一起学习成长吧~哈哈哈(终极目标,能够懂并浅易开发)
  
  
1.下载node.js

下载网址: node.js
点击安装下一步
  1. node -v
复制代码
D:/docs/Typroa/imgs/image-20250314182354650.png
2.安装vue脚手架

目标是为了让我们能预制加载一些类库,让我们开发达到简化
   不必要指定什么文件夹,直接粘贴下面的命令,enter回车即可
  1. npm install -g @vue/cli
复制代码

查验是否成功:
  1. D:\projs\vue>vue --version
  2. @vue/cli 5.0.8  ##版本号(出现版本号就是成功)
复制代码
3.创建一个项目

   这边必要选择一个文件夹:
  比如我选择的是D:\projs\vue这个文件夹
  1. 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组件的命令
  1. ##最新的版本
  2. npm i --save ant-design-vue@next
  3. ##具体的版本
  4. npm i --save ant-design-vue@4.x
复制代码

如果上面的安装出现错误,运行如下命令
  1. npm audit fix --force
复制代码
  在项目中全局设置: 目标是为了我们背面用到这些组件
  

   有个坑: 上面
  安装完 antd 为什么 dist 下面没有 antd.css 文件？因为最新版本不必要 import'ant-design-vue/dist/antd.css';
  去除掉就可以了
  

如何证明我们安装好了呢?
   任意选择一个组件,进行安装就可以
  如添加一个按钮
  1. <a-button type="primary" danger>Primary</a-button>
复制代码

6.全局通用布局

   就是页面上不会变的总布局,如顶部的菜单栏
  我们建一个layouts文件夹.然后新建一个BasicLayout.vue的组件
  

代码
  1. <template>
  2.   <div class="basic-layout">我们测试下,你好,vue</div>
  3. </template>
  5. <script setup lang="ts"></script>
  7. <style scoped></style>
复制代码
我们在根页面src/App.vue引入通用布局

代码
  1. <template>
  2.   <div id="app">
  3.     <BasicLayout />
  4.   </div>
  5. </template>
  7. <style></style>
  8. <script setup lang="ts">
  9. import BasicLayout from "@/layouts/BasicLayout.vue";
  10. </script>
复制代码

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


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/) Powered by Discuz! X3.4