vant + Vue创建项目全过程
vant + Vue创建项目全过程vant + Vue创建项目全过程1、安装vue-cli3脚手架2、通过vue-cli3创建项目3、安装vant4、引入组件5、Rem 适配6、底部安全区适配vant + Vue创建项目全过程1、安装vue-cli3脚手架npm install -g @vue/cli2、通过vue-cli3创建项目2.1、(my-project是你创建项目的项目名称,自己取的)v
vant + Vue创建项目全过程
1、安装vue-cli3脚手架
npm install -g @vue/cli
2、通过vue-cli3创建项目
2.1、(my-project是你创建项目的项目名称,自己取的)
vue create my-project
2.2、当你执行这行代码的时候,你会发现项目会出现如下选择
按键盘上下键选择默认(default)还是手动(Manually),如果选择default,一路回车执行下去就行了,这里我选择手动
根据需求选择配置,按上下键选择,space键选择
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) TypeScript // JavaScript的一个超集(添加了可选的静态类型和基于类的面向对象编程:类型批注和编译时类型检查、类、接口、模块、lambda 函数)
( ) Progressive Web App (PWA) Support // 渐进式Web应用程序
( ) Router // vue-router(vue路由)
( ) Vuex // vuex(vue的状态管理模式)
( ) CSS Pre-processors // CSS 预处理器(如:less、sass)
( ) Linter / Formatter // 代码风格检查和格式化(如:ESlint)
( ) Unit Testing // 单元测试(unit tests)
( ) E2E Testing // e2e(end to end) 测试
这里是我选择的配置,仅供参考
2.3、选择您想要开始项目的Vue.js版本,这里我选择2.X
如果这里vue.js选择了3.X,vant现在最新的版本和vue3.X还没有做适配,如果你后面发现你引入的vant的组件,没有样式,一定要去检查一下你Vue和vant的版本
2.4、因为安装了router所以会弹出来,选择Y
2.5、选择css预处理,这里我选择第一种
2.6、ESLint:提供一个插件化的javascript代码检测工具,这里我选择最后一个
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only //只有错误预防
ESLint + Airbnb config //Airbnb 配置
ESLint + Standard config //标准配置
ESLint + Prettier //使用较多 (漂亮的配置)
2.7、何时检测,我选择保存就检测:
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Lint on save // 保存就检测
( ) Lint and fix on commit // fix和commit时候检查
2.8、如何存放设置,这里我选择放package.json里
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files // 独立文件放置
In package.json // 放package.json里
2.9是否保存本次配置(之后可以直接使用):
? Save this as a preset for future projects? (Y/n) // y:记录本次配置,然后需要你起个名; n:不记录本次配置
然后等这个进度条跑完,你就的项目框架就配置好了
打开你创建的项目目录就能看到自己刚刚创建的项目了,这个时候你可以通过npm run serve启动这个项目了,是不是很简单呢?别急,我们现在只是成功了一半,跟着我接着往下面操作吧
3、安装vant
这里有两种方式安装:
1、通过npm安装
npm i vant -S
2、通过yarn安装
yarn add vant
4、引入组件
4.1、安装插件
npm i babel-plugin-import -D
我们在babel.config.js进行配置
// 在.babelrc 中添加配置
// 注意:webpack 1 无需设置 libraryDirectory
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
// 对于使用 babel7 的用户,可以在 babel.config.js 中配置
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
5、Rem 适配
Vant 中的样式默认使用px作为单位,如果需要使用rem单位,推荐使用以下两个工具:
postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem
lib-flexible 用于设置 rem 基准值
下载
npm install px2rem-loader --save
npm install amfe-flexible --save
在根目录创建一个postcss.config.js文件
文件 postcss.config.js 参考内容
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 37.5,
//这是基准值,在375px的屏幕变大rem的值会变大,小于这个大小元素的rem值会变小
propList: ['*']
}
}
}
6、底部安全区适配
iPhone X 等机型底部存在底部指示条,指示条的操作区域与页面底部存在重合,容易导致用户误操作,因此我们需要针对这些机型进行底部安全区适配。Vant 中部分组件提供了safe-area-inset-bottom属性。
在index.html的heade中添加
<!-- 在 head 标签中添加 meta 标签,并设置 viewport-fit=cover 值 -->
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/>
<!-- 开启 safe-area-inset-bottom 属性 -->
<van-number-keyboard safe-area-inset-bottom />
更多推荐
所有评论(0)