vue项目搭建

Vant 是有赞前端团队维护的移动端 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant 可以快速搭建出风格统一的页面，提升开发效率。

一、关于 1.0

距离 Vant 首次发布刚好过去了半年时间，在这半年时间里 Vant 团队广泛吸纳社区的反馈和建议，持续对组件进行打磨、优化，使得 Vant 逐渐成长为一个轻量、可靠的移动端 Vue 组件库。

在这个时间点上我们决定发布 Vant 的 1.0 正式版，希望未来有更多小伙伴能够参与到 Vant 的开发和使用中来。

GitHub 地址：github.com/youzan/vant

二、现有组件

三、开发理念

轻量化

作为移动端组件库，Vant 一直将轻量化作为核心开发理念。为了平衡日益丰富的功能和轻量化之间的矛盾关系，我们尝试了很多的优化方式，包括支持组件按需加载、公共模块复用、组件编译流程优化等。

在应用一系列的优化手段之后，目前 Vant 的组件平均体积仅有 8.8KB，Uglify + Gzip 后约 1KB。作为对比，mint-ui 的组件平均体积为 15.2KB，某些组件库的组件平均体积甚至在 25KB 以上。

Vant 之所以能保持如此小的组件体积，主要归功于我们独特的组件编译方式。目前主流的组件编译方式是通过 webpack 搭配 vue-loader 对每个组件进行编译，为每个组件生成一个打包后 JS 文件。这样的做法会产生大量的冗余代码，比如 webpack 内置的模块化代码、vue-loader 内置的 normalize 函数、重复引入的 babel helper 等等，而我们不希望在组件的编译结果中引入这些冗余代码。

一开始我们尝试通过使用 rollup 和 rollup-plugin-vue 去解决上述的问题，但很快我们就发现了更为直接的方式，即通过官方提供的 vue-template-compiler 和 babel 对组件进行编译，这样的方式简单纯粹，编译出的代码非常干净，细节在此不做赘述，有兴趣的同学可以看下 Vant 中构建部分的源码。

快速迭代

另外一个很重要的理念是快速迭代。有赞前端团队几十个工程师每天都在用的就是现在你看到的 GitHub 上这个版本，我们并没有一个所谓的“内部版”。同时，出于对自己名誉的珍视，我们不是简单地把它开源了事，而是把它当做一款技术产品去维护，不单单自己用的爽，也要让别人好用，因此我们会保持对社区需求的快速响应、对 bug 及时跟进并修复。

迄今为止项目 commit 总数超过 1600 次，解决 issue 300 个，合并 Pull Request 400 个，发布 90 次，基本上保持了一周 1 ~ 2 次的发布节奏。这里面包含了很多社区开发者的付出，感谢他们对 Vant 作出的贡献~ 在未来我们也会继续保持这样的开发节奏，为社区输出更好的开源产品。

生态化

除了提供组件以外，我们也在为丰富 Vant 的开发生态做很多尝试，希望能覆盖各个场景下的开发需求，为大家提供便利。下面是我们现有的一些生态或能力：

• 基于 vue-cli 的脚手架 vue-cli-template-vant
• 支持 nuxt 服务器端渲染
• 支持 Typescript 类型检测
• 支持 i18n 多语言定制
• 支持通过 postcss 插件进行主题定制
• 官方 Demo 仓库 - vant-demo
• 基于相同视觉规范的小程序组件库 - zanui-weapp
• 开源社区的移动商城示例项目 - vant--mobile-mall

在生态化方面我们还有很多需要补齐的方面，比如提供对 rem 的支持、vscode 代码提示插件等，这些将会是我们 2023年05月15日尝试的方向。

四、最后

开源项目的进步离不开社区的贡献，非常感谢过去对 Vant 提出 PR 和意见的所有人，希望未来能有更多的同学加入到 Vant的开发中来。如果你对有赞的前端团队感兴趣，也欢迎加入我们一起玩耍~

章录昌3427vue的脚手架搭建最后输入npm run dev怎么找不到地址呀 -
徐彬韩17054886003 ______ 1. 首先确定一下你是否在命令行里进入了vue项目的文件夹了,cd xxxx/xxx/xxx2. 查看你是否安装了依赖,npm i3. 如果都没有报错的话,应该就可以了,它会自动弹出地址的

章录昌3427vuejs怎么在服务器部署 -
徐彬韩17054886003 ______ 用vue-cli搭建的做法1、npm run build2、把dist里的文件打包上传至服务器 例 /data/www/,我一般把index.html放在static里 所以我的文件路径为:/data/www/static |-----index.html |-----js |-----css |-----images ....3、配置nginx监听80端口, location /static alias 到 /data/www/static,重启nginx location /static { alias /data/www/static/; }4、浏览器访问http://ip/static/index.html即可

章录昌3427如何在WebStorm 2017下调试Vue.js + webpack -
徐彬韩17054886003 ______ 有人觉得vue项目难调试,是因为用了webpack.所有代码揉在了一起,还加了很多框架代码,根本不知道怎么下手.所以vue+webpack调试要从webpack入手.我们先从一般情况开始说.-sourcemapwebpack配置提供了devtool这个选项,如果...

章录昌3427vue是什么 怎么用 -
徐彬韩17054886003 ______ Vue.js是一套构建用户界面的渐进式框架,Vue 采用自下向上增量开发的设计,其核心库只关注视图层,易于上手,同时vue完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用.1、MVVM即model,view,viewmodel,它...

章录昌3427vue.js怎样构建后台管理界面 -
徐彬韩17054886003 ______ 介绍: 这是一个用vuejs2.0和element搭建的后台管理界面. 相关技术: vuejs2.0:渐进式JavaScript框架,易用、灵活、高效,似乎任何规模的应用都适用. element:基于vuejs2.0的ui组件库. vue-router:一般单页面应用spa都要用到的前端路由. vuex:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.

章录昌3427如何用 Vue.js 实现一个建站应用 -
徐彬韩17054886003 ______ 需求 获取需求是开始项目的第一步.一般来说建站工具大多提供以下功能: 提供模板 主题色 丰富的功能模块,如图文、轮播、相册等 模块可以拖拽以及根据需求配置 支持创建多个页面的网站 页面可以分栏分区,有一些布局上的变化 网站支持...

章录昌3427Vue到底是怎样个框架 -
徐彬韩17054886003 ______ vue是一款有好的、多用途且高性能的JavaScript框架,它能够帮助你创建可维护性和课测试性更强的代码库,vue是渐进式的JavaScript框架,也就是说如果你已经有一个现成的服务端应用你可以将vue作为该应用的一部分嵌入其中,带来更加丰富的交互体验或者如果你希望将更多的业务逻辑放到前端来实现那么vue的核心库机器生态系统也可以满足你的各式需求. 与其他框架相同,vue允许你讲一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JavaScript以用来渲染网页中相应的地方.

章录昌3427如何在Vue中建立全局引用或者全局命令 -
徐彬韩17054886003 ______ 1一般在vue中,有很多vue组件,这些组件每个都是一个文件.都可能需要引用到相同模块(或者插件).我们不想每个文件都import一次模块.如果是基于vue.js编写的插件我们可以用Vue.use()2但是如果想添加一个全局命令,同时又让每个vue...

章录昌3427什么是Vue.js框架 为什么选择它 -
徐彬韩17054886003 ______ Vue.js是一个交互性较强的前端框架,去Vue.js官方中文网,首页会展示一段小视频,里面说明了Vue.js的简单又基本的用法. 登录前端库或GitHub,Vue的热门度,正义极快的速度增长,成为目前最流行的框架,没有之一.当然,我只是说,就...

章录昌3427引入式的vue和vue框架搭建页面的区别是什么,应该注意什么 -
徐彬韩17054886003 ______ 从性质上来说是没区别的,都是把另外一个文件包含到当前文件的某个位置 如果你要讨论更深层次的我觉得也没什么太大必要了吧?毕竟vue是一种前端框架,而php和jsp则是后端编程语言