学习地址1：https://pan.baidu.com/s/1vLcrBLZ59KSCDgsDj4K8rg 提取码: vfff
学习地址2：https://share.weiyun.com/aXaiIMC3 密码：q5aaj7
实际搭建流程：
下载鸿蒙源码 → 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：
export const store = createStore({
// ...
mutations: {
setCount(state, payload) {
state.count += payload
return state.count
}
}
// ...
})
action 中可以通过提交** mutation **来修改状态，不直接修改状态
action 中可以做一些异步操作
提供一个上下文，可以直接使用commit、state、getters等，代码片段如下所示：
export const store = 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中进行过滤查询：
export const store = createStore({
state:{
todos:[ // 定义一个对象数组
{
id: 1,
done: true
},
{
id: 2,
done: false
}
]
}
getters: {
doneTodosCount () { // 查询已完成的个数
return store.state.todos.filter(todo => todo.done).length // 返回值：1
}
}
})
首先使用 Typescript的 interface为 store中的所有 state声明类型，然后将 interface放置在InjectionKeyd的泛型类型中，代码片段如下：
// src/store/index.ts
import { createStore, Store } from 'vuex'
import { InjectionKey } from 'vue'
// 为 store state 声明类型
export interface AllStateTypes {
count: number,
locale: any,
userStatus: Number
}
// 定义 injection key
export const key: InjectionKey<Store<AllStateTypes>> = Symbol('storeKey')
export const store = createStore<AllStateTypes>({
// ...
})
我们使用 Nodejs框架 Express来快速搭建一个后端服务，首选需要安装一下 Express，在终端运行npm install express --save-dev，Vite官方提供一个基于服务端渲染的 Node Server模板 ，代码片段如下：
// server.js
const fs = require('fs')
const path = require('path')
const express = require('express')
const { createServer: createViteServer } = require('vite')
async function createServer() {
const app = express()
// 以中间件模式创建 Vite 应用，这将禁用 Vite 自身的 HTML 服务逻辑
// 并让上级服务器接管控制
//
// 如果你想使用 Vite 自己的 HTML 服务逻辑（将 Vite 作为
// 一个开发中间件来使用），那么这里请用 'html'
const vite = await createViteServer({
server: { middlewareMode: 'ssr' }
})
// 使用 vite 的 Connect 实例作为中间件
app.use(vite.middlewares)
app.use('*', async (req, res) => {
const url = req.originalUrl
try {
// 1. 读取 index.html
let template = fs.readFileSync(
path.resolve(__dirname, 'index.html'),
'utf-8'
)
// 2. 应用 Vite HTML 转换。这将会注入 Vite HMR 客户端，
// 同时也会从 Vite 插件应用 HTML 转换。
// 例如：@vitejs/plugin-react-refresh 中的 global preambles
template = await vite.transformIndexHtml(url, template)
// 3. 加载服务器入口。vite.ssrLoadModule 将自动转换
// 你的 ESM 源码使之可以在 Node.js 中运行！无需打包
// 并提供类似 HMR 的根据情况随时失效。
const { render } = await vite.ssrLoadModule('/src/entry-server.ts')
// 4. 渲染应用的 HTML。这假设 entry-server.ts 导出的 `render`
// 函数调用了适当的 SSR 框架 API。
// 例如 ReactDOMServer.renderToString()
const appHtml = await render(url)
// 5. 注入渲染后的应用程序 HTML 到模板中。
const html = 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()
在终端执行命令：npm install -D unplugin-vue-components unplugin-auto-import，接着在 vite.config.ts中做如下配置：
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default {
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
}
有疑问加站长微信联系（非本文作者）
