安裝vuejs全過程、淘寶鏡像

小技巧：因爲npm是國外的，因此使用淘寶鏡像，把命令粘過來

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

我： 

之後用npm的地方就用cnpm替換

看cnpm裝上了嗎：  cnpm -v 或npm ls cnpm -g 

我：

安裝完cli後再輸入vue就能夠看到vue自己變成了一個命令：

而後：在F盤的workplace文件夾，打包my-frist-vue-project

vue init webpack my-frist-vue-project

我：

此時，在當前文件夾（F:\workplace）下，多了個《my-frist-vue-project》

咱們進來看一下——在cmd裏輸入：cd my-frist-vue-project 再輸ls就能夠查看《my-frist-vue-project》裏有哪些東西了：

咱們下載了這個項目也不能跑起來，由於咱們要先裝它的依賴。依賴必須和package.json文件裝在同一目錄，因此先type package.json看一下當前目錄有沒有package.json文件。而後用npm install就能夠安裝全部依賴了：

我：

把依賴（npm install）安裝在F:\workplace\my-frist-vue-project目錄，依賴裝好後多了個node_modules目錄。

跑一下這個項目：命令npm run dev

此時，服務器就啓動了，端口是：localhost:8080自動出來http://localhost:8080/的網頁。網頁效果：

這是vue的模板。這套腳手架工具就算搭建成功了。

 

接下來要作的就是在《my-first-vue-project》文件夾的《src》裏進行具體的項目開發，其它的文件夾都不用關注。

 

《src》裏的App.vue文件有熱更新，在文件改了（本例to改爲"to2"）以後保存，點webstrom的瀏覽器圖標，發現網頁會自動更新,這是腳手架工具所提供的一個功能。

 

 

 

經過webstorm中的File Types配置（Preferences > Editor >File types） 將.vue格式的文件註冊爲HTML文件類型(在HTML里加*.vue),這樣html中的代碼提示也會被用到.vue上；

不對，不能把*.vue放HTML裏，由於VUE的*.vue就自動沒了（用webstorm打開後綴vue文件時，因爲VUE的*.vue沒了，因此瀏覽器就變成下載.vue文件了）

 

sublime能夠熱更新 而webstorm不能熱更新：解決：

webstorm保存的時候會先保存到舊時文件中，其實並無真正保存，要在setting->stystem settings下的「use save write」去掉，如圖：