Vue CLI 3 + Vant 项目搭建
注释:以下命令均用npm,如您使用的是yarn,可以点击以下链接进入查阅。Vue CLI 3 安装:npm install -g @vue/cli 创建项目:vue create my-project// my-project是项目名称 项目创建完成后,进入项目根目录:cd my-project 如果不需要Vant或其它UI组件库,可以直接运行...
·
注释:以下命令均用npm,如您使用的是yarn,可以点击以下链接进入查阅。
安装:
npm install -g @vue/cli
创建项目:
vue create my-project // my-project是项目名称
项目创建完成后,进入项目根目录:
cd my-project
如果不需要Vant或其它UI组件库,可以直接运行项目:
npm run serve
如果需要的话请往下看,在这里我用的是Vant(轻量、可靠的移动端 Vue 组件库)
安装:
npm install --save vant
引入组件:
方式一. 使用 babel-plugin-import (推荐)
babel-plugin-import
是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式
# 安装 babel-plugin-import 插件
npm i babel-plugin-import -D
# 新建.babelrc文件,在根目录新建".babelrc"文件,或者用以下命令:
type null>.babelrc
# .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']
]
};
# 然后就可以在组件中按需引入vant的组件和在vue中注册组件使用了
<script>
import {Button} from 'vant';
export default {
name: 'App',
// 注意不能漏掉这一步
components:{
[Button.name]:Button
}
}
</script>
<div>
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
</div>
方式二. 按需引入组件
# 在不使用插件的情况下,可以手动引入需要的组件
import Button from 'vant/lib/button';
import 'vant/lib/button/style';
方式三. 导入所有组件
# 注意:配置 babel-plugin-import 插件后将不允许导入所有组件
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
然后就可以运行啦
npm run serve
更多推荐
已为社区贡献8条内容
所有评论(0)