uni-app引入uView1.0/2.0步骤
第一步:在uni-app新建的项目中 使用CMD下载uView
npm install uview-ui
第二步:在main.js里引入和注册uView 这两句代码需要在import Vue之后
#1.8
import uView from "uview-ui";
Vue.use(uView);
#2.0
import uView from '@/node_modules/uview-ui'
Vue.use(uView)
第三步:在uni.scss文件中引入uView的全局Scss主题文件
#1.8
@import 'uview-ui/theme.scss';
#2.0
@import '@/node_modules/uview-ui/theme.scss';
第四步:在App.vue文件中引入全局共用的scss文件
#1.8
<style lang="scss">
/* 写在第一行,style标签需要加入lang="scss" */
@import "uview-ui/index.scss";
</style>
#2.0
<style lang="scss">
/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
@import "@/node_modules/uview-ui/index.scss";
</style>
第五步:在pages.json中设置下面代码
#1.8
{ // 在这里添加uview组件配置模式
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
// 下面是项目本来有的pages
"pages": [
// ......
]
}
#2.0
"easycom": {
"^u-(.*)": "@/node_modules/uview-ui/components/u-$1/u-$1.vue"
},
第六步:uniapp引入uView必需依赖scss 必须要安装此插件,在uniapp的插件市场里安装scss 如果有 则忽略此步
第七步:就可以在uni-app中正常使用uView的组件了