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>