所需E币: 0
时间: 2023-12-1 16:19
大小: 3.49KB
实际搭建流程:下载鸿蒙源码→docker拉取镜像→创建容器→进入容器→下载hb编译工具(也可使用build.sh、build.py脚本编译,但是不如hb辅助工具指令好用)→编译(内核、芯片厂商的uboot、系统镜像...)1.准备开发环境:首先,您需要设置用于鸿蒙应用程序开发的开发环境。2.学习鸿蒙应用程序开发:了解鸿蒙应用程序开发的基础知识,包括鸿蒙应用程序的架构、UI设计和鸿蒙系统的特性。3.开发应用程序:使用鸿蒙开发工具,开始编写您的应用程序代码。您可以创建各种类型的应用程序,包括手机应用、平板电脑应用、电视应用、手表应用等。4.设计用户界面:使用鸿蒙的UI组件和工具,设计用户界面。鸿蒙提供了一套UI框架,可以帮助您创建吸引人的用户界面。5.数据处理和功能开发:根据您的应用程序需求,编写数据处理逻辑和应用程序功能。鸿蒙支持多种编程语言,包括Java、C、C++和JS。6.测试和调试:在真机或模拟器上测试您的应用程序,以确保它正常运行。鸿蒙提供了调试工具,以帮助您发现和解决问题。7.发布应用程序:一旦应用程序准备就绪,您可以将其发布到鸿蒙应用程序商店或其他应用程序分发渠道。8.更新和维护:定期更新和维护您的应用程序,以确保它与鸿蒙系统的最新版本兼容,并提供新功能和修复问题。使用store.commit方法来调用:store.commit('事件类型/函数名'),代码片段如下所示:1)在Vue中调用mutations:exportconststore=createStore({ //... mutations:{ setCount(state,payload){ state.count+=payload returnstate.count } } //... })action中可以通过提交**mutation**来修改状态,不直接修改状态action中可以做一些异步操作提供一个上下文,可以直接使用commit、state、getters等,代码片段如下所示:exportconststore=createStore({ //... actions:{ fetchCount({commit,state,getters},payload){//{commit,state,getters}为上下文 setTimeout(()=>{ commit('setCount',5) console.log(state.count) console.log(getters.getCount) },3000); } } })getter类似与Vue中的computed计算属性,它的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算getters里可以处理一些array、object的查询、过滤、遍历、重构或者做一些字符拼接的操作,方便直接生成一些可以直接使用的数据。如下代码片段展示了如何在getter中进行过滤查询:exportconststore=createStore({ state:{ todos:[ //定义一个对象数组 { id:1, done:true }, { id:2, done:false } ] } getters:{ doneTodosCount(){ //查询已完成的个数 returnstore.state.todos.filter(todo=>todo.done).length //返回值:1 } } })首先使用Typescript的interface为store中的所有state声明类型,然后将interface放置在InjectionKeyd的泛型类型中,代码片段如下://src/store/index.tsimport{createStore,Store}from'vuex'import{InjectionKey}from'vue'//为storestate声明类型exportinterfaceAllStateTypes{ count:number, locale:any, userStatus:Number}//定义injectionkeyexportconstkey:InjectionKey<Store<AllStateTypes>>=Symbol('storeKey')exportconststore=createStore<AllStateTypes>({ //...})我们使用Nodejs框架Express来快速搭建一个后端服务,首选需要安装一下Express,在终端运行npminstallexpress--save-dev,Vite官方提供一个基于服务端渲染的NodeServer模板,代码片段如下://server.jsconstfs=require('fs')constpath=require('path')constexpress=require('express')const{createServer:createViteServer}=require('vite')asyncfunctioncreateServer(){ constapp=express() //以中间件模式创建Vite应用,这将禁用Vite自身的HTML服务逻辑 //并让上级服务器接管控制 // //如果你想使用Vite自己的HTML服务逻辑(将Vite作为 //一个开发中间件来使用),那么这里请用'html' constvite=awaitcreateViteServer({ server:{middlewareMode:'ssr'} }) //使用vite的Connect实例作为中间件 app.use(vite.middlewares) app.use('*',async(req,res)=>{ consturl=req.originalUrl try{ //1.读取index.html lettemplate=fs.readFileSync( path.resolve(__dirname,'index.html'), 'utf-8' ) //2.应用ViteHTML转换。这将会注入ViteHMR客户端, // 同时也会从Vite插件应用HTML转换。 // 例如:@vitejs/plugin-react-refresh中的globalpreambles template=awaitvite.transformIndexHtml(url,template) //3.加载服务器入口。vite.ssrLoadModule将自动转换 // 你的ESM源码使之可以在Node.js中运行!无需打包 // 并提供类似HMR的根据情况随时失效。 const{render}=awaitvite.ssrLoadModule('/src/entry-server.ts') //4.渲染应用的HTML。这假设entry-server.ts导出的`render` // 函数调用了适当的SSR框架API。 // 例如ReactDOMServer.renderToString() constappHtml=awaitrender(url) //5.注入渲染后的应用程序HTML到模板中。 consthtml=template.replace('<!--ssr-outlet-->',appHtml) //6.返回渲染后的HTML。 res.status(200).set({'Content-Type':'text/html'}).end(html) }catch(e){ //如果捕获到了一个错误,让Vite来修复该堆栈,这样它就可以映射回 //你的实际源码中。 vite.ssrFixStacktrace(e) console.error(e) res.status(500).end(e.message) } }) app.listen(3000)}createServer()在终端执行命令:npminstall-Dunplugin-vue-componentsunplugin-auto-import,接着在vite.config.ts中做如下配置://vite.config.tsimportAutoImportfrom'unplugin-auto-import/vite'importComponentsfrom'unplugin-vue-components/vite'import{ElementPlusResolver}from'unplugin-vue-components/resolvers'exportdefault{ plugins:[ //... AutoImport({ resolvers:[ElementPlusResolver()], }), Components({ resolvers:[ElementPlusResolver()], }), ],}