uniapp 项目基础搭建（vue2）

一 .创建项目

创建项目可以通过工具创建，也可以通过脚手架下载

---

1.通过工具创建

---

2.通过脚手架下载

安装脚手架

​​npm install -g @vue/cli

下载项目模板

vue create -p dcloudio/uni-preset-vue 项目名称

二. 下载相关依赖

1. 项目默认是没有package.json文件的，可以通过运行npm init -y来创建

npm init -y

---

2. 安装uniapp的 ui库

   npm i uview-ui@2.0.37

在main.js文件中将uview-ui导入

import uView from 'uview-ui';

Vue.use(uView);

在uni.scss文件中导入uview的主题文件

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

在app.vue引入uview基础样式，在第一行，并且要加上lang="scss"

<style lang="scss">
@import "uview-ui/index.scss";
	/*每个页面公共css */
</style>

在page.json中配置easycom动态引入uview组件

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

{
	"easycom": {
		"u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

测试：

导入一个组件，看看能否自动导入 uview官网

在index.vue中添加以下代码

    <u--text type="primary" text="主色"></u--text>
    <u--text type="error"   text="错误"></u--text>
    <u--text type="success" text="成功"></u--text>
    <u--text type="warning" text="警告"></u--text>
    <u--text type="info"    text="信息"></u--text>