vscode构建uniapp引入uView

一、构建uniapp

1.构建uniapp,前提是按照了vue-cli

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

2.选择需要的模版

3.用vscode打开这个项目

二、引入 uView

4.安装sass和sass-loader

npm i sass -D

npm i sass-loader@10 -D

 5.安装 uView

npm install uview-ui@2.0.36

 6.在项目的 src 目录中的 main.js 文件中引入 uView 的 js 库并使用

 注：这两行需要添加在 import Vue 之后

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

 7.再找到 src 下面的 uni.scss 文件引入

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

8. 在 App.vue 的 style 中引入样式并给 style 标签加入 lang = "scss"

<style lang="scss">
	
	@import "uview-ui/index.scss";
</style>

9. 再找 src 下面的 pages.json 文件添加 easycom

{
    "easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	   },
       "pages": [ 
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},{
			"path": "pages/index/my",
			"style": {
				"navigationBarTitleText": "我的"
			}
		}
	],

}

10.效果如图