、前期環(huán)境準(zhǔn)備

• 安裝Node.js

1、官網(wǎng)下載地址：https://nodejs.org/zh-cn/，選擇14.17.3 長(zhǎng)期支持版。

2、下載并安裝node.js，npm會(huì)自動(dòng)被安裝。

//安裝完node.js，打開(kāi)cmd命令窗口，執(zhí)行命令：
	node -v    //查看node版本
	npm -v    //查看npm版本

• 設(shè)置npm鏡像源

//在命令行窗口中輸入命令，然后等待
npm config set registry https://registry.npm.taobao.org 
//完成后，查看鏡像源地址,是否設(shè)置成功
 npm get registry

• 安裝vue-cli，用vue-cli構(gòu)建vue項(xiàng)目

官網(wǎng)地址：https://cli.vuejs.org/zh/

關(guān)于舊版本

Vue CLI 的包名稱(chēng)由 vue-cli 改成了 @vue/cli。 如果你已經(jīng)全局安裝了舊版本的 vue-cli (1.x 或 2.x)，你需要先通過(guò) npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它。

//在命令行窗口中輸入命令，然后等待
npm install -g @vue/cli

//檢查其版本是否正確：
vue --version

2、用vue-cli構(gòu)建vue項(xiàng)目

//在命令行窗口中輸入命令,然后【回車(chē)】創(chuàng)建項(xiàng)目.。
//hello-world：項(xiàng)目名
vue create hello-world

//耐心等待，然后選擇Vue 2版本，再回車(chē)等待依賴下載完成。
Vue CLI v4.5.13
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features

3、項(xiàng)目結(jié)構(gòu)

public 目錄：index.html 首頁(yè)入口文件

src 目錄: 存放項(xiàng)目源碼及需要引用的資源文件。

assets 目錄：存放靜態(tài)資源目錄。如：css、js、圖片等

componets 目錄：存放公共組件

app.vue 文件：組件展示主界面

main.js 文件：項(xiàng)目核心配置文件。包含視圖模型創(chuàng)建，關(guān)聯(lián)視圖層、注冊(cè)組件等功能

package.json 文件：用于 node_modules資源配置、啟動(dòng)、打包項(xiàng)目的 npm 命令管理。

在package.json文件找到以下配置：

"scripts": {

"serve": "vue-cli-service serve",

"build": "vue-cli-service build",

"lint": "vue-cli-service lint"

}

serve 命令：?jiǎn)?dòng)項(xiàng)目

build：命令打包項(xiàng)目，部署到生產(chǎn)環(huán)境

"dependencies": {

"core-js": "^3.6.5",

"vue": "^2.6.11"

}

dependencies：依賴管理

所有已安裝依賴，都會(huì)在這顯示

4、啟動(dòng)項(xiàng)目

//啟動(dòng)項(xiàng)目，運(yùn)行命令：

npm run serve

//打包項(xiàng)目，部署到生產(chǎn)環(huán)境

npm run build

DONE  Compiled successfully in 4195ms                                6:00:31 PM

  App running at:

  - Local:   http://localhost:8080/

  - Network: http://192.168.43.27:8080/

  Note that the development build is not optimized.

  To create a production build, run npm run build.

命令行啟動(dòng)完成，顯示這些信息，至此項(xiàng)目搭建成功。訪問(wèn) http://localhost:8080/ 可以看到效果。

后續(xù)功能持續(xù)完善，待續(xù)。。。

營(yíng)和研發(fā)如何協(xié)作？活動(dòng)運(yùn)營(yíng)中臺(tái)已然是產(chǎn)研團(tuán)隊(duì)為運(yùn)營(yíng)打造的必備生產(chǎn)力工具。本文從業(yè)務(wù)討論、核心單元等幾個(gè)方面分析活動(dòng)運(yùn)營(yíng)中臺(tái)的相關(guān)內(nèi)容，希望對(duì)你有所啟發(fā)。

運(yùn)營(yíng)是業(yè)務(wù)的第一生產(chǎn)力，運(yùn)營(yíng)團(tuán)隊(duì)通過(guò)各種運(yùn)營(yíng)動(dòng)作最大效率實(shí)現(xiàn)商業(yè)化目的。

那么問(wèn)題來(lái)了，運(yùn)營(yíng)動(dòng)作強(qiáng)依賴產(chǎn)研協(xié)作，研發(fā)排期是一個(gè)硬傷，如何提升運(yùn)營(yíng)工作的生產(chǎn)效率？如何打造運(yùn)營(yíng)的必備生產(chǎn)力工具？

“活動(dòng)運(yùn)營(yíng)中臺(tái)” 應(yīng)運(yùn)而生，滿足于這些常見(jiàn)場(chǎng)景：

• 加快創(chuàng)建產(chǎn)品聚合頁(yè)的速度，依靠模板快速生成頻道頁(yè)和專(zhuān)題頁(yè)。
• 加快創(chuàng)建營(yíng)銷(xiāo)落地頁(yè)的速度，依靠玩法快速生成營(yíng)銷(xiāo)互動(dòng)落地頁(yè)。
• 提升產(chǎn)品運(yùn)營(yíng)的效率，基于用戶行為的數(shù)據(jù)來(lái)驅(qū)動(dòng)產(chǎn)品露出。

整理運(yùn)營(yíng)生產(chǎn)力工具的相關(guān)資料，從業(yè)務(wù)討論、核心單元、應(yīng)用場(chǎng)景以及中臺(tái)路線圖等方面和大家談?wù)劇盎顒?dòng)運(yùn)營(yíng)中臺(tái)”，希望對(duì)你有所幫助。

一、活動(dòng)運(yùn)營(yíng)中臺(tái)的業(yè)務(wù)討論

你怎么看 活動(dòng)運(yùn)營(yíng)中臺(tái)？

1）討論一，活動(dòng)運(yùn)營(yíng)中臺(tái) 是 營(yíng)銷(xiāo)互動(dòng)平臺(tái) 還是內(nèi)容聚合平臺(tái)？

重營(yíng)銷(xiāo)互動(dòng)玩法，還是重產(chǎn)品聚合頁(yè)面？或是 一個(gè)圍繞活動(dòng)的應(yīng)用市場(chǎng)？

2）討論二，活動(dòng)運(yùn)營(yíng)中臺(tái) 與 商業(yè)化廣告投放，該如何協(xié)作？

如何 讓 廣告 展示在 N個(gè) 活動(dòng)應(yīng)用中？活動(dòng)應(yīng)用中的商業(yè)化投放 該 如何做競(jìng)價(jià)、排程與分發(fā)。

3）討論三，活動(dòng)中臺(tái) 可以是獨(dú)立的業(yè)務(wù)嗎？有盈利空間嗎？

活動(dòng)中臺(tái)SaaS化，諸如 會(huì)員積分SaaS、活動(dòng)抽獎(jiǎng)SaaS， 能盈利嗎？

二、活動(dòng)運(yùn)營(yíng)中臺(tái)的核心單元

1. 模塊設(shè)計(jì)單元（建模開(kāi)發(fā) / 組件市場(chǎng)）

模塊是活動(dòng)運(yùn)營(yíng)中臺(tái)的靈魂。

常見(jiàn)的業(yè)務(wù)數(shù)據(jù)模塊，都基于關(guān)系型數(shù)據(jù)配置，例如自定義圖文、圖文模塊、Banner模塊、廣告模塊、產(chǎn)品模塊、促銷(xiāo)模塊、點(diǎn)評(píng)模塊等，業(yè)務(wù)數(shù)據(jù)模塊聚焦于聚合內(nèi)容傳播。、

常見(jiàn)的營(yíng)銷(xiāo)玩法模塊，都基于會(huì)員、積分、禮品等配置，例如拆紅包、抽獎(jiǎng)、答題、表單、助力、砍價(jià)等，營(yíng)銷(xiāo)玩法模塊更聚焦于互動(dòng)裂變傳播。

發(fā)布一個(gè)新模塊應(yīng)用，需要完成產(chǎn)品經(jīng)理梳理好 數(shù)據(jù)的定義、數(shù)據(jù)的解析、模板的解析。

• TPL，模板渲染引擎，基于模板標(biāo)簽，生成應(yīng)用頁(yè)面，綁定樣式表。
• Model，模板數(shù)據(jù)模型，定義數(shù)據(jù)的Schema，綁定業(yè)務(wù)數(shù)據(jù)。
• Parser：數(shù)據(jù)解析引擎，調(diào)用業(yè)務(wù)基礎(chǔ)服務(wù)，生成業(yè)務(wù)數(shù)據(jù)。

2. 模板設(shè)計(jì)單元（前端物料庫(kù) / 模板市場(chǎng)）

模板是活動(dòng)運(yùn)營(yíng)中臺(tái)的骨架，模板分為兩種，頁(yè)面模板和模塊模版。

常見(jiàn)的頁(yè)面模板設(shè)計(jì)，包含SEO的TKD、自定義CSS、頁(yè)面頭、埋點(diǎn)工具、頁(yè)面區(qū)塊布局等。

模塊的模版設(shè)計(jì)需要跟著業(yè)務(wù)模塊自身字段屬性來(lái)規(guī)劃。

例如產(chǎn)品模塊的模板設(shè)計(jì)，就包含產(chǎn)品名稱(chēng)、產(chǎn)品售價(jià)、產(chǎn)品標(biāo)簽、產(chǎn)品鏈接、產(chǎn)品排列布局等。

發(fā)布一個(gè)新模版，需要定義模板字段以及樣式表，同時(shí)也要考慮多終端的響應(yīng)布局。

標(biāo)簽是實(shí)現(xiàn)模板和數(shù)據(jù)的橋梁，產(chǎn)品經(jīng)理需要定義好，目前前端框架都支持模板渲染。

3. 數(shù)據(jù)分析單元（運(yùn)營(yíng)數(shù)據(jù)洞察）

要有數(shù)據(jù)，先有埋點(diǎn)，常見(jiàn)的埋點(diǎn)行為有兩種：

• 頁(yè)面事件埋點(diǎn)，統(tǒng)計(jì)和跟蹤用戶訪問(wèn)頁(yè)面的信息。
• 點(diǎn)擊事件埋點(diǎn)，統(tǒng)計(jì)和跟蹤用戶在頁(yè)面上的點(diǎn)擊行為。

常見(jiàn)的埋點(diǎn)key設(shè)計(jì)，一個(gè)訪問(wèn)unionID，包含來(lái)源頁(yè)、落地頁(yè)、區(qū)塊、模塊、坑位等，需要產(chǎn)品經(jīng)理和數(shù)據(jù)分析團(tuán)隊(duì)定義和描述，特別是做場(chǎng)景報(bào)表的時(shí)候。

基于埋點(diǎn)可實(shí)現(xiàn)常見(jiàn)的關(guān)鍵指標(biāo)項(xiàng)的統(tǒng)計(jì)與分析，比如用戶畫(huà)像、用戶路徑、渠道漏斗、場(chǎng)景報(bào)表等，運(yùn)營(yíng)基于數(shù)據(jù)反饋，及時(shí)調(diào)整產(chǎn)品露出策略。

三、活動(dòng)運(yùn)營(yíng)中臺(tái)的應(yīng)用場(chǎng)景

生產(chǎn)力工具，幫助實(shí)現(xiàn)各種運(yùn)營(yíng)動(dòng)作，常見(jiàn)的動(dòng)作有：

1. 發(fā)布活動(dòng)頁(yè)面之產(chǎn)品聚合頁(yè)

例如類(lèi)目聚合頁(yè)、頻道聚合頁(yè)、專(zhuān)題聚合頁(yè)。

2. 發(fā)布活動(dòng)頁(yè)面之營(yíng)銷(xiāo)落地頁(yè)

例如拆紅包頁(yè)、抽獎(jiǎng)頁(yè)、答題頁(yè)、表單頁(yè)、助力頁(yè)。

3. 發(fā)布活動(dòng)頁(yè)面與商業(yè)化廣告投放

例如活動(dòng)頁(yè)面上的廣告位資源，供應(yīng)商對(duì)廣告位資源的應(yīng)征、競(jìng)價(jià)、排程。

四、活動(dòng)運(yùn)營(yíng)中臺(tái)的下一步

1. 大語(yǔ)言模型下的服務(wù)插件

例如攜程問(wèn)道，活動(dòng)運(yùn)營(yíng)中臺(tái)承接GPT提示詞的服務(wù)插件響應(yīng)。

基于某個(gè)POI請(qǐng)求，輸出旅游線路的產(chǎn)品聚合頁(yè)或者主題聚合頁(yè)。

2. 面向私域社群的種草服務(wù)

例如家裝業(yè)主群，活動(dòng)運(yùn)營(yíng)中臺(tái)，可以通過(guò)樓盤(pán)小區(qū)聚合頁(yè)、家裝主題聚合頁(yè)、業(yè)主積分營(yíng)銷(xiāo)頁(yè)等內(nèi)容的互動(dòng)種草，更好實(shí)現(xiàn)商業(yè)化目的。

本文由 @這屆南京碼農(nóng) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于 CC0 協(xié)議

該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。