uni-starter V2.1.4分析备忘录(一)

uni-starter是uniapp的得意之作，与uni-admin一起组成了uni程序的根骨。学习和应用uniapp,当先了解uni-starter。然而uni-starter的版本太多，更新又太快，所以我们只能以当前（2023-8-16）的最新版V2.1.4为例，说明之。

一、运行这个项目

1、生成一个新项目，比如 LoginDemo，具体操作如下：

注意：一定要选uni-starter，因为它是实用项目的基础前台

2、新建的项目，并不能成功运行，还须要配置一点东西。在项目自动生成完成之后，点开这个项目（以后称之为LoginDemo），点中一个件夹，点右键：

选择“打开uniCloud Web控制台”菜单，进入这个控制台

点开“帐号管理"

点开”应用管理"

点开“LoginDemo”

选择"Android云端证书"，没有生成的，必须先生成证书

点“证书详情”,要记住这里的MD5、SHA1、SHA256，后面会用到的。

各平台信息，新增

点新增之后

在这里用刚才MD5、SHA1、SHA256,写入上面

iOS看起来相当简单，但是我们暂时不处理

3、记下几个参数：

先记下一键登录的 AppKey和AppSecret,一会要用

点添加应用，把新建的项目加进去

这个要审批，但是通常会过。

这个短信的smskey和smsSecret也要记下来，后面有用

4、修改 LoginDemo 的后台程序：

这里的sms就是短信配置，univerify就是一键登录，把前面取得的参数，填写到上面，就可以运行了。当然微信、QQ、支付宝登录等，还是不能用的。这些需要第三方的支持，不是我们短时间可以的！

5、运行后效果图：

其实这个版本还有问题的，就是不断的闪！

二、main.js文件分析

这个工程，理论上第一个要执行的文件就是main.js。

main.js是 uni-app 的入口文件，主要作用是初始化 vue实例、定义全局组件、使用需要的插件如 vuex。首先引入了 Vue库和 App.vue，创建了一个 vue实例，并且挂载 vue实例。

import App from './App'
import i18n from './lang/i18n'


// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
	i18n,
	...App
})
app.$mount()   //挂载 Vue 实例
// #endif


// #ifdef VUE3
import {createSSRApp} from 'vue'

export function createApp() {
	const app = createSSRApp(App)
	app.use(i18n)
	return {app}
}
// #endif

1、App.vue主控文件：

App.vue是uni-app的主组件，所有页面都是在 App.vue下进行切换的，是页面入口文件。但 App.vue本身不是页面，这里不能编写视图元素，也就是没有