uni app使用uView搭建小程序

开发工具：VSCode
开发框架：uni-app + uView
步骤：
一、创建uni-app项目
1、全局安装vue-cli

npm install -g @vue/cli

2、创建uni-app项目

vue create -p dcloudio/uni-preset-vue demo

我在创建过程中遇到这样的报错，如下：

解决方案：可以将uni-preset-vue下载下来：https://github.com/dcloudio/uni-preset-vue
再重新创建（此处路径‘E:\project\uni-preset-vue’为你下载到的位置）

vue create -p E:\project\uni-preset-vue demo

3、此时，会提示选择 uni-app 模板，初次体验建议选择 Hello uni-app 项目模板，（我选的是默认模板）如下所示：

创建好之后就会出现如下内容：

至此，uni-app项目创建完毕。
二、在VSCode中打开项目
1、安装组件语法提示

npm i '@dcloudio/uni-helper-json'

2、导入 HBuilderX 自带的代码块，从 github 下载 uni-app 代码块，放到项目目录下的 .vscode 目录即可拥有和 HBuilderX 一样的代码块（链接：https://gitcode.net/mirrors/zhetengbiji/uniapp-snippets-vscode?utm_source=csdn_github_accelerator），如果没有.vscode目录可自行创建。

三、uView安装及配置
1、安装（这是安装固定版本，如果不想安装这个版本可以去掉后面的版本号，直接安装）

yarn add uview-ui@1.8.4
或者
npm install uview-ui@1.8.4
安装其他
yarn add sass sass-loader@10.1.1 node-sass  -D

2、在 uni-app 项目根目录下 main.js 文件 引入并使用uView库

// 引入并使用 uView 库
import uView from 'uview-ui';
Vue.use(uView);

3、在 uniapp 项目根目录下 App.vue 文件 引入基础样式

<style lang="scss">
	// 引入 uview 基础样式
	@import "uview-ui/index.scss";
</style>

4、在 uniapp 项目根目录下 uni.scss 文件 引入全局scss变量文件

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

5、在 uniapp 项目根目录下 pages.json 文件 配置easycom规则

"easycom": {
	"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},

到这里，小程序就创建完成了，可以在pages/index/index.vue中使用uView的组件看看是否成功（uView官方文档：https://v1.uviewui.com/components/intro.html）
最后运行到小程序：

npm run dev:mp-weixin
或者
yarn dev:mp-weixin