uni-app引入uView1.8/2.0步骤

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的组件了