HbuilderX创建项目之后…
如果您的项目是由HBuilder X
创建的,相信已经安装scss插件,如果没有,请在HX菜单的 工具->插件安装中找到"scss/sass编译"插件进行安装, 如不生效,重启HX即可。
安装uview
1.将下载后的uview-ui
文件夹,复制到项目根目录。
2.在mian.js
下引入:
// 引入全局uView
import uView from 'uview-ui';
Vue.use(uView);
3.uni.scss
中引入全局SCSS主题文件:
这里很大程度上我们不需要他的主题文件,我们需要自定义主题,详情参考:https://www.uviewui.com/guide/theme.html,将自定义的主题后会得到一个uview.theme.scss
文件,放入static目录下:
/* uni.scss */
// @import 'uview-ui/theme.scss';
@import './static/common/css/uview.theme.scss'
4.App.vue
引入uView基础样式:
//注意:添加`lang='scss'`
<style lang="scss">
@import "uview-ui/index.scss";
</style>
5.配置easycom组件模式:此配置需要在项目根目录的pages.json
中进行。
// pages.json
{
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
至此,uview组件已配置完成,去index.vue中使用相关组件进行测试和验证是否成功。