vue初始化项目结构,并引入ant-design

2023-05-16

前提:node已经安装好
npm install cnpm -g 安装淘宝镜像【npm可能速度不快,所以可以使用cnpm来替代】
cnpm install vue 安装vue
cnpm install --global vue-cli 安装vue-cli

初始化项目结构
vue init webpack vue-project
在这里插入图片描述
下面的操作可以一直回车默认,如果你代码规范要求比较严格,可以打开ESLint【y】,自己搞的项目选【n】
? Project name vue-project
? Project description A Vue.js project
? Author 邮箱地址 <邮箱地址>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run npm install for you after the project has been created? (recommended) npm

在这里插入图片描述
安装启动:
cd vue-project
cnpm install
cnpm run dev

在这里插入图片描述
成功访问地址:http://localhost:8080/#/
在这里插入图片描述
下面介绍引入蚂蚁Ant-Design组件库使用
官方文档:https://www.antdv.com/docs/vue/introduce-cn/
先安装ant-design-vue模块,【cnpm 也一样】
npm install ant-design-vue --save
或者
cnpm install ant-design-vue --save
在这里插入图片描述
安装好后,按需加载【推荐】
{
“plugins”: [
[“import”, { “libraryName”: “ant-design-vue”, “libraryDirectory”: “es”, “style”: “css” }] // style: true 会加载 less 文件
]
}
在这里插入图片描述
如果有解析.babelrc错误,先执行cnpm i babel-plugin-import --save-dev 安装babel插件
在这里插入图片描述
在这里插入图片描述
引入一个按钮组件
在这里插入图片描述
启动后界面显示ant-design默认风格的按钮-【primary】
在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue初始化项目结构,并引入ant-design 的相关文章

  • 洛谷 P3366 【模板】最小生成树

    洛谷 P3366 模板 最小生成树 题目 给出一个无向图 xff0c 求出最小生成树 xff0c 如果该图不连通 xff0c 则输出orz 题目链接 模板 最小生成树 洛谷 输入 第一行包含两个整数N M xff0c 表示该图共有N个结点和
  • 2019 计蒜之道 复赛 D “星云系统”

    2019 计蒜之道 复赛 D 星云系统 题目 现在给定你一个字符串s以及一个整数k xff0c 请求出s的字典序最小的长度为k的子序列 题目链接https nanti jisuanke com t 39614 输入格式 第一行一个由小写英文
  • Linux mysql 配置

    一 数据库处室化密码 刚刚装好的数据库需要重置密码 alter user user identified by 39 12345678 39 如果是测试环境 或者自己玩的环境 设置密码过于简单 可以通过一下命令修改关于密码的校验 set g
  • 二进制安装Kubernetes(k8s) v1.26.0 IPv4/IPv6双栈

    二进制安装Kubernetes xff08 k8s xff09 v1 26 0 IPv4 IPv6双栈 https github com cby chen Kubernetes 开源不易 xff0c 帮忙点个star xff0c 谢谢了 介
  • ThinkPad E430 蓝牙驱动 BCM43142A0

    最近我意外发现公司的 ThinkPad E430 笔记本竟然是带有蓝牙的 D 查看蓝牙设备标识 ID 利用 lsusb 命令找到蓝牙模块信息 Bus 001 Device 004 ID 105b e065 Foxconn Internati
  • cephadm 安装部署 ceph 集群

    介绍 手册 xff1a https access redhat com documentation zh cn red hat ceph storage 5 html architecture guide index http docs c
  • PVE Cloud-INIT 模板配置

    PVE Cloud INIT 模板配置 Cloud init是什么 Cloud init是开源的云初始化程序 xff0c 能够对新创建弹性云服务器中指定的自定义信息 xff08 主机名 密钥和用户数据等 xff09 进行初始化配置 通过Cl
  • openstack 环境部署

    22 1 了解云计算 人类基于千年的物种衍变基础 xff0c 在这个世纪终于有了爆发式的科技成果 xff0c 尤其这二十年内互联网的发展 xff0c 更像是一种催化剂 xff0c 让原本已经热闹的地球更加的沸腾 xff0c 互联网经济泡沫破
  • C语言,计算圆的面积程序

    C语言 xff0c 计算圆的面积程序 span class token comment 计算圆的面积程序 日期 xff1a 2020 8 29 姓名 xff1a 张倩峰 span span class token macro propert
  • 博图软件搜索不到网卡

  • 台达伺服手动调试

  • 博途V15.1激活工具出错。

    博图V15 1激活 xff0c 软件出错 出现以下报错信息 解决方法 xff1a 下载新版本激活工具 再次激活
  • winCC正常运行,不显示画面。

    winCC正常运行 xff0c 不显示画面 解决方法 xff1a 需要重装系统 xff0c 重新安装博途
  • S7-1500PLC仿真

    S7 1500PLC仿真
  • 一些已安装产品需要许可证,请启动Automation License Manager

    更新系统版本号 完成更新 xff0c 再次安装即可解决该问题
  • ubuntu 硬盘管理工具

    就我目前所用的系统举例说明吧 xff0c 应该都大同小异的 有图形界面的 xff0c 也有命令行的 xff1a 首先是 ubuntu 系统自带的 Disk Utility 工具集 利用该工具可以对硬盘进行 Format Drive View
  • MCS-51单片机,定时1分钟,汇编程序

    MCS 51单片机 xff0c 定时1分钟 xff0c 汇编程序 去博客设置页面 xff0c 选择一款你喜欢的代码片高亮样式 xff0c 下面展示同样高亮的 代码片 span class token constant ORG span 00
  • c++枚举字符串转换工具

    为什么会需要这样一个枚举转字符串 xff0c 字符串转枚举的工具 xff1f 在太多的工程中 xff0c 我们可能都需要将一些枚举 整形标记打到日志中去 xff0c 如果只打印数组 xff0c 那也不行啊 xff0c 出问题翻看日志 xff
  • AD16在PCB布局的时候如何批量复制布局布线!!

    本人也是看了很多博主的帖子反反复复推敲 xff0c 最后发现有的博主没讲到关键部分所以在批量复制布局的时候总是事与愿违 话不多说请看招 xff01 第一步选中需要复制的布局 xff01 如图所示 第二步 复制选中布局的 offset Cha
  • Atcoder abc250 题解 (A~G)

    A Adjacent Squares xff08 枚举 xff09 枚举一下 xff0c 满足题意则ans 43 43 即可 cin span class token operator gt gt span h span class tok

随机推荐