vue cli3脚手架创建vant项目环境

最新推荐文章于 2024-06-28 22:18:56 发布
最新推荐文章于 2024-06-28 22:18:56 发布
阅读量1.1k 收藏
点赞数
分类专栏： VUE 2 文章标签： vue cli3脚手架创建vant项目环境
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ahui829/article/details/101099800
版权

vue cli3脚手架创建vant项目环境

1.在桌面创建一个文件夹vant，终端cd到vant文件下,运行下面

vue create vantsite

vantsite就是你的项目的目录文件，可以随意取名，但好像不能驼峰式会报错
在这里插入图片描述
出现上图后直接回车，
安装成功后 运行下面代码回车

vue ui

成功后浏览器会自动弹出页面 不能弹出手动输入终端里面的链接localhost:8000
在这里插入图片描述
选择导入 选择创建的vantsite文件 导入这个文件夹
在这里插入图片描述
然后如下图
在这里插入图片描述
任务->serve-运行 运行成功后选择输出 点击链接就能看到如下页面了：
在这里插入图片描述
接下来 安装vant依赖及一些需要的依赖
回到这里
在这里插入图片描述
选择安装依赖 输入vant
在这里插入图片描述
安装即可，这里我习惯sass预编css所以我安装了sass和sass-loader。当然你也可以选择终端命令行来安装它们

先cd到vantsite
npm install sass --save 回车

在这里插入图片描述
安装完成 就可以用scss写样式了
再安装一个官方路由vue-router插件
ok！就说到这里 下篇我们继续vant组件 如何引用并使用组件

键指江湖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
脚手架vue-cli自定义创建Vue项目，完整详细步骤！
共同学习，共同成长
06-04 483
脚手架vue-cli自定义创建Vue项目，完整详细步骤！
[Vue+Vant] 使用脚手架创建和配置项目
weixin_42902669的博客
05-09 748
目录1. 安装 nodejs/npm2. 安装 vue-cli3. 安装 vant4. 安装 router5. 启动服务 1. 安装 nodejs/npm 下载 & 安装 curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash - sudo yum -y install nodejs 替换 npm 源 npm get registry # 查看 npm config set registry http://registry.np
创建vant项目
2301_77378763的博客
05-01 170
首先在D盘创建vue-home文件夹(名字不一定要取这个)输入:vue create demo-vant。demo-vant是项目名字可以改。然后回车即可拿idea打开即可。点进这个文件夹输入cmd。
VUE3脚手架工具cli配置搭建及创建VUE工程
雾林小妖的博客
06-17 2558
VUE3脚手架工具cli配置搭建及创建VUE工程
Vant组件库学习-环境搭建
qq_40850266的博客
02-12 1090
1官网地址 https://vant-contrib.gitee.io/vant/#/zh-CN/action-bar 2初始化项目 a 在cmd输入命令vue ui启动可视化界面 vue ui 输入后浏览器会自动打开可视化界面 b点击创建创建项目 手动创建预设是很美丽的 选择组件 选择vue版本 创建，这里看个人需要是否创建模板 c 启动项目 d 安装vant组件，起始就是引入依赖 使用npm安装 # Vue 3 项目，安装最新版 Vant npm i vant e 第一个
创建第一个Vant程序
weixin_65493827的博客
09-24 732
vant
vue-cli3移动端自适应配置 Vant组件库
m0_46693606的博客
02-26 967
Vant：轻量、可靠的移动端 Vue 组件库 （推荐使用） 通过vue-cli搭建完项目后开始进行Vant配置 第一步：安装vant npm i vant -S yarn add vant 第二步：引入组件 （推荐自动按需引入组件） ① 安装babel-plugin-import插件 babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式 npm i babel-plugin-import -D ②在babel.config.
vue+cli3+vant.zip
04-22
CLI3（命令行界面3）是Vue的官方脚手架工具，用于快速搭建项目结构，自动化处理配置，节省开发者时间。Vue CLI3 提供了许多预设和自定义选项，以适应不同项目的需求。 Vant 是一个基于 Vue 的轻量级 UI 组件库，...
基于vue-cli4和vant搭建的移动端开发模板
02-19
Vue CLI（命令行界面工具）是Vue.js官方维护的一个强大脚手架，它使得项目初始化、配置和构建过程变得更加便捷。Vue CLI 4是该工具的最新版本，引入了更多优化和新特性，极大地提高了开发效率。 Vue CLI 4的主要...
vueCli-H5-vant-templace-：H5快速生成模板
02-12
这是基于vue-cli4实现的移动端框架，其中包含项目常用的配置。 技术栈：vue-cli4 + webpack4 + vant + axios + scss + postcss-px2rem 主要包括如下技术点： vue-cli4脚手架 vant按需约会 移动端rem适应 axios拦截...
Vue3 + TypeSciprt+Vant 项目框架构建
老司机的后备箱
06-20 1160
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ApjGDxQM-1655734119007)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4bcd5ea8327c4b2d855e1acb1f9d9975~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]浏览器地址栏输入 chrome://extensions/右上角开发者模式 - 打开开关。把 vue3_devto
vue3.0+vant项目脚手架搭建，接口封装，可以直接拿来用
10-20
vue3.0+vant项目脚手架搭建，接口封装，可以直接拿来用
新建SpringCloud电商前端Vant项目
xiaoyezhiei的博客
06-30 559
该项目是SpringCloud项目的前端用户终端方面代码
vue-cli4+vant+rem+sass+vuex+axios封装+webpack搭建移动端项目
2303_79056168的博客
04-04 659
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可免费领取},},},},“[vue]”: {},},自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
脚手架-vant安装和使用
ytfty24124的博客
10-19 818
vant安装和使用
Vite脚手架+Vant组件库初始化前端项目
最新发布
m0_73966521的博客
06-28 677
Vite 可以被视为一个优化了的构建工具，特别针对 Vue 3 的开发。在前端开发中，脚手架（Scaffold）是指一个用于快速搭建项目基础结构的工具或模板。脚手架包含了项目所需的基本文件结构、配置文件、依赖管理等内容，使开发者能够更快速地开始项目开发，而不必从头开始搭建整个项目结构。总结起来就是，我们准备开始搭建项目的时候，不需要自己从0到1全部自己写，我们可以去网上拉写好的脚手架下来。新建一个项目文件夹，并打开cmd（在项目目录中直接打开），运行npm create vite。
移动端项目创建，脚手架，vant3移动开发的UI组件
qq_63322025的博客
10-28 1671
移动端项目创建，脚手架，vant3移动开发的UI组件
Vuecli3加Vant创建项目
LLL_liuhui的博客
11-22 483
详情：Vuecli3https://cli.vuejs.org/zh/guide/installation.html 1、安装Vue CLI npm install -g @vue/cli # OR yarn global add @vue/cli 2、创建项目 vue create my-demo // my-demo是项目名称 3、项目创建完成后，进入项目目录 cd ...
html引入vant没有效果,使用自己搭建的vue项目，使用vant时，虽然引入这个插件，但是没有任何效果，请问如何解决...
weixin_34043280的博客
06-03 734
webpack.base.js 文件const path = require('path');const webpack = require('webpack');const VueLoaderPlugin = require('vue-loader/lib/plugin');const UglifyJsPlugin = require('uglifyjs-webpack-plugin');con...
vue-cli3结合vant与postcss-px2rem的移动端开发实战
本示例选择了`vue-cli3`作为项目脚手架，它提供了快速搭建Vue.js应用的能力，具有自动化配置、热更新等功能。`vant`是来自有赞的轻量级UI组件库，适用于移动电商场景，提供了丰富的组件和良好的设计风格。而`postcss...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值