uni-app使用uView(npm模式)

uni-app使用uView(npm模式)

1.开发环境 uni-app+uView
2.电脑系统 windows10专业版
3.在使用 uni-app+uView开发的使用,我们有的时候是使用 vue 进行创建项目的,下面我来分享一下使用 vue命令创建 的uni-app使用uView,希望对你有所帮助!
4.0.首先使用 vue命令创建项目,以管理员身份运行终端,输入命令:

**使用正式版**（对应HBuilderX最新正式版）
vue create -p dcloudio/uni-preset-vue my-project

**使用alpha版**（对应HBuilderX最新alpha版）
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project

4.以管理员身份运行v终端,执行命令:

1.
npm i uview-ui  --save
2.
npm i node-sass  --save
3.
npm i sass-loader  --save

5.在main.js中添加如下代码:

import uView from "uview-ui";
Vue.use(uView);

6.在 uni.scss中添加如下代码:

/* uni.scss */
@import 'uview-ui/theme.scss';

7.在pages.json中添加如下代码:

"easycom": {
        "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    },
//注意,添加的代码和 pages 是同级的关系

8.在 .vue模板中使用 ,添加如下代码:

成功按钮

9.重新运行,效果如下:

10.本期的分享到了这里就结束啦,是不是很nice,希望对你有所帮助,让我们一起努力走向巅峰!