等了很久，終於收到落戶批覆啦！就差後面辦一些手續。
這篇文章首先分享一下自己作爲一名本科生，通過攢積分成功落戶上海的一些心得。然後手把手帶大家使用 Vue 框架開發一個『 上海應屆生落戶積分計算器 』網站。
建議先觀看短視頻簡單瞭解下，然後選擇自己感興趣的部分閱讀。
落戶心得
以前從沒想過要留在上海，但後來在上海讀書，待了一年後，有些習慣了，也逐漸開始愛上這座城市。
我是從大二開始確定落戶目標的，一開始什麼都不懂，也根本沒想過要落戶。雖然家長親戚一直在我耳邊叮囑落戶多麼多麼重要，但當時我的心態就是 “反正買不起房，落不落戶不都一樣？”
後來，自己上網查詢了有關戶口的信息，突然發現校園落戶比社會落戶要容易許多，現在清北復交等多所名校的學生甚至可以直接落戶！
如果能在畢業時直接落戶，將爲以後省去不少的麻煩，即使買不起車房，但是先有一個戶口總比沒有好。
當時上海市落戶積分 72 分才能達標，於是我就按照積分規則來簡單計算了一下：
| 積分項 | 情況 | 得分 |
|---|---|---|
| 最高學歷 | 本科 | 21 |
| 畢業學校 | 第一類高校 | 15 |
| 最高學歷畢業在滬 | 是 | 2 |
| 學習成績 | 一級 | 8 |
| 外語水平 | 英語六級 | 8 |
| 計算機水平 | 計算機專業 | 7 |
| 用人單位分 | 滿足條件 | 5 |
除了學歷外，上述積分項我都拿到了最高分，但總計也只有 66 分，也就是說，如果沒有任何競賽、榮譽、專利等加分，距離落戶還差整整 6 分！
怎麼去湊這 6 分呢？在當時來看，我覺得參加競賽是最好的選擇，能抱一個大腿就更好啦！
於是，我的 “落戶目標” 就簡化爲 “參加競賽並拿獎”。首先仔細確認哪些競賽獎項能爲落戶加分。
其實對於計算機專業或者學習編程的同學來說，上面的很多比賽我們都可以參與，比如挑戰杯、互聯網+、數學建模等，會有一定的難度，所以最好趁早準備、報團取暖。
剛開始我試着自己組團參加了一些比賽，但結果都不是很理想， 後來有幸抱了其他學院的大腿，我們一起參與了挑戰杯競賽，並取得了上海市特等獎、全國二等獎的成績，直接給落戶加了十幾分！
.png)
後來還拿了上海市優秀畢業生等其他榮譽，把競賽獎項的加分直接拉滿（15 分），最終以 81 分成功積分落戶。
總結一下，給想落戶的同學的建議是，儘早確認目標，先儘量保證基本分拿滿，然後多去參加競賽、爭取一些榮譽稱號，能力強的同學還可以試着申請一些發明專利。本科無法直接落戶的同學也可以考慮讀研，研究生階段科研競賽機會更多，落戶也更容易。
爲了幫助更多同學計算自己的落戶積分，之前我也開發了一個單頁面網站『 上海應屆生落戶積分計算器 』，就當一個練手項目了，下面一起來實踐下吧！
開發落戶積分計算器
做一個落戶積分計算器非常簡單，就是一個單頁面網站的 Demo，使用 Vue 前端框架，除去輸入文字的時間，只用 10 分鐘就能完成開發和上線。
說是計算器，其實就是一個累加器，整個網站就是一個表單，用戶可以根據自己的情況來選擇對應選項，每個選項有不同的分數，在網站底部會實時顯示當前的總分。
最終效果如下：
1. 創建項目
通過 Vue 的腳手架工具 Vue Cli，輸入一行命令，就可以輕鬆地搭建一個前端項目，還會自動安裝依賴包：
vue create can-i-settle-shanghai生成如下目錄：
有了腳手架，真的輕鬆不少，不用再自己寫項目的基礎模板啦！
2. 引入 Vant 組件庫
要做一個移動端網頁，推薦引入一個精美的組件庫，這裏我推薦有讚的 Vant，精緻美觀、文檔成熟。
參照官方文檔的 “快速上手” 部分，先在項目中引入 Vant 依賴：
npm i vant -S然後直接全局引入，比較方便：
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);之後就可以使用 Vant 的組件了，參照官方文檔，選擇組件後複製代碼到頁面文件即可：
引入組件庫後，就可以開發界面了。
3. 開發界面
開發界面就像拼圖一樣，將一個大的頁面拆解爲多個小的組件，然後自上而下堆積起來。
如下圖，整個頁面由 “標題”、“輸入框”、“單選按鈕組”、“底部展示按鈕” 組成。
在 Vue 框架中，通常一個頁面對應一個 .vue 文件。該文件分爲三部分：內容、樣式、行爲，分別對應 HTML、CSS、JavaScript 代碼。
一個標準的 .vue 文件如下：
<template>
... 寫網頁內容和結構
</template>
<script>
... 給頁面添加交互行爲
</script>
<style scoped>
... 寫樣式，美化網頁
</style>通常的開發流程是，先寫內容，再去美化，最後再給網站添加交互行爲。
編寫內容比較簡單，可以直接使用 Vant 的對應組件，比如 Radio 單選框、Divider 分割線、Field 輸入框。在文檔中搜索，然後複製代碼到項目頁面文件中，部分代碼如下：
<template>
<!-- 通過 style 屬性控制單個標籤樣式 -->
<van-divider :style="{ color: '#1989fa', borderColor: '#1989fa'}">最高學歷</van-divider>
<van-radio-group>
<van-radio name="27">博士27分</van-radio>
<van-radio name="24">碩士24分</van-radio>
<van-radio name="21">本科21分</van-radio>
</van-radio-group>
</template>再編寫一個按鈕用於顯示當前分數 total，並且當 total >= 72 時，改變按鈕顯示的顏色：
<van-button :type="total >= 72 ? 'primary' : 'info'">當前分數：{{total}}</van-button>寫完結構後，再然後美化一下樣式，比如增加間距、調整字體等等，此處代碼省略。
4. 實現積分計算功能
開發完網站的界面後，要增加交互行爲，實現積分計算功能。每當用戶點擊選項或輸入，都要觸發一次計算，更新右下角的 “當前分數”。
可以定義一個 score 數組來記錄得分，比如 “最高學歷” 選項組的得分用 score[0] 來記錄，“畢業學校” 選項組的得分用 score[1] 來記錄。當然也可以用其他數據結構，如對象。
<script>
export default {
name: "Index",
// 在 data 中定義變量
data() {
return {
scores: [],
show: false,
};
}
}
</script>用 v-model 指令綁定數組元素到選項組，同時要用 @change 指令給選項標籤綁定一個點擊事件，當用戶點擊界面選擇時，改變當前 score 數組元素的值。每個選項有一個 name 屬性，代表選中時的得分。
代碼如下：
<template>
<van-radio-group v-model="scores[2]" @change="doChange">
<van-radio name="2">上海 2分</van-radio>
<van-radio name="0">非上海 0分</van-radio>
</van-radio-group>
</template>比如我點擊了 “上海 2分” 選項，scores[2] 的值就爲 2。
那計算總分也就很簡單了，只要將 score 數組元素累加求和，利用 Vue 的 computed 屬性，可以輕鬆實現當 score 數組值變化時，自動更新總分 total 的值。
<script>
export default {
...
computed: {
// 定義 total 變量
total() {
let total = 0;
// 循環求和
for (const score of this.scores) {
if (score) {
total += parseInt(score);
}
}
return total;
}
}
}
</script>計算功能就實現了！
5. 打包發佈
本地開發完成後，怎麼將網站發佈，讓所有人都能看到呢？
首先在項目目錄下通過命令打包項目：
npm run build會在生成 dist 目錄，結構如下：
怎麼發佈網站到線上呢？先買臺服務器？
大可不必，可以使用 Vercel。
Vercel 是免費網站託管平臺，可以幫我們輕鬆部署網站，並生成可訪問的網址。先通過 npm 安裝 Vercel：
npm install -g vercel安裝完成後，進入 dist 目錄，通過 vercel 命令發佈網站：
cd public
vercel deploy --name can-i-settle-shanghai發佈成功，會得到一個網址，打開就能看到積分計算器網站啦！
就是這樣，點擊鏈接可以查看項目的源代碼。
其實很多問題都可以使用編程來解決，也希望大家在學編程的過程中，多多發揮自己的想象，並動手敲代碼來實現創意，就能不斷進步！
此心安處是吾鄉，希望大家都能留在自己喜愛的城市，品味生活。