一、uni-app安装vue-cli3

1、安装指定版本号/在uin-App安装其他版本无法使用upx/rpx会直接解析成%，现阶段只有3.12.1版本可以用
npm install -g @vue/cli@3.12.1
2、创建uni-app vue项目
vue create -p dcloudio/uni-preset-vue my-project （选择默认模板）
3、在uni-app中使用sass 因为使用uni-ui需要sass
npm install node-sass --save //先装依赖
npm install sass-loader --save
在style 标签中直接使用 lang="scss" 就可以了
我在HbuiderX工具中安装scss是不可使用的，最后是通过命令行安装的
4、配置pages.json
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "TitleName",//头部导航名字
"navigationBarBackgroundColor": "blueviolet",//背景颜色
}
}，
//如果页面不需要头部导航可以这样设置
{
"path": "pages/index/index",
"style": {
"navigationStyle":"custom" //禁用uni-app默认的头部导航
}
}],
//设置底部导航，和小程序配置是一样的
"tabBar": {
"color": "#cdcdcd",
"selectedColor": "#39cffc",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "static/icon/square.png",
"selectedIconPath": "static/icon/squared.png",
"text": "首页"
}, {
"pagePath": "pages/find/find",
"iconPath": "static/icon/shop_wei.png",
"selectedIconPath": "static/icon/shop_ed.png",
"text": "发现"
},
{
"pagePath": "pages/nav/nav",
"iconPath": "static/icon/my.png",
"selectedIconPath": "static/icon/my_ed.png",
"text": "导航"
},
{
"pagePath": "pages/person/person",
"iconPath": "static/icon/pingjia.png",
"selectedIconPath": "static/icon/pingjia_ed.png",
"text": "我的"
}
]
}
}