2018年12月5日

第一階段

雖然網上教程很多，但是還是記錄一次完整的步驟

1.安裝nodejs,網上一堆的教程，基本上下載後傻瓜式一路next

2.安裝npm,網上一堆的教程，也是基本下載後傻瓜式一路next

3.安裝完成執行cmd，檢視是否安裝成功

4.安裝cnpm

由於有些npm有些資源被遮蔽或者是國外資源的原因，經常會導致用npm安裝依賴包的時候失敗，所有我還需要npm的國內映象—cnpm。

在命令列中輸入 npm install -g cnpm –registry=http://registry.npm.taobao.org 然後等待

 

5.安裝完成如下圖。

 

6.安裝vue-cli腳手架構建工具

在命令列中執行命令 npm install -g vue-cli ，然後等待安裝完成。 

7.在桌面上新建專案 ResumeProgram 

vue init webpack firstVue

--這個命令的意思是初始化一個專案，其中webpack是構建工具，也就是整個專案是基於webpack的

其中 ResumeProgram  是整個專案資料夾的名稱，這個資料夾會自動生成在桌面

8.執行完成後會要寫專案名稱啊什麼的，可以寫一下，也可以在後面的pakeage.json裡面修改

9.vs code 開啟專案，作者這些自己改就行，這個時候有許多的外掛是沒有安裝的，資料夾內是沒有生成node_modules資料夾的

10.要安裝依賴包，首先cd到專案資料夾（ResumeProgram  資料夾），然後執行命令 cnpm install ，等待安裝。 

回車執行，抽個煙，慢慢等它自己安裝

11.安裝完成後檢視vs code ,node_modules 已經出現在目錄中，這裡全是需要的依賴包

12.想要執行這個專案的話，在【終端】-【新建終端】，在開啟的輸入 npm run dev 回車，接著等

13.執行完成後，自動開啟一個埠，複製這個連結到瀏覽器上，浪起來吧，少年~~~

 

 

 

第二階段  建立vue模板 

我們基本只需要關心 src 資料夾，其他的基本不管

【【【為了以後建立頁面省事，妥妥的必需，不然幾十個頁面搞死你】】】

ctrl+shift+p 出來吧，控制面板,輸入 snippet

 

配置模板，我用的是下面的這個

{     "vue-template": {      "prefix": "vue",      "body": [         "<template>", " <div class=\"wrapper\">$0</div>", "</template>",             "",             "<!-- Add \"scoped\" attribute to limit CSS to this component only -->", "<style lang=\"scss\" scoped>", "</style>", "<script>", "export default {", " components:{},", " props:{},", " data(){", " return {", " }", " },", " watch:{",             "",                 "},", " computed:{",             "",                 "},", " methods:{",                 "",                 "},", " created(){",                 "",                 "},",             " mounted(){",                 "}", "}",             "</script>",                   ],      "description": "my vue template"     } }

然後在新建的頁面 輸入 vue 會自動帶出這個模板

輕鬆+愜意 ~~

好了，今天就寫到這。看看明天能不能夠繼續！

下一篇就寫寫配置頁面和釋出