Vue - 使用命令行搭建單頁面應用

使用命令行搭建單頁面應用

咱們來看一下最後完成的效果：

 

 

大綱

1. 下載 node, git, npm

2. 使用命令行安裝一個項目

 

1、 下載工具

        node ,  git  的下載你們能夠去官網自行下載就能夠了。

       

       下面說一說安裝 npm，npm 是在以上兩個都安裝的狀況下才能夠的。

       國內直接 git npm 很是慢，因此咱們到 taobao 的 npm 鏡像下面去下載安裝   鏡像地址>> 

 

      

 

       打開安裝好的 git bash 

       

 

       1 . 在 Git Bash 輸入鏡像的地址：

       

       下載成功後，輸入 cnpm -v 看看是否安裝成功了

        

 

      2 . 安裝好 npm 下面就好辦了，咱們回到 Vue 官方網站看使用命令行安裝步驟： 猛戳回到官網>>

       

 

           按照上面的步驟進行安裝：( 以上只要是 npm 的都要改爲 cnpm )

           1. 全局安裝 vue-cli   $ cnpm install -g vue-cli

              

 

           2. 建立一個基於 " webpack "  的模板的項目  $ vue init webpack my-pro

               

            接下來會有一系列的問題：

              

            3. 安裝依賴 $ cd my-pro 切換到剛纔建立的 my-pro 目錄下面

            

 

          4. 輸入 $ cnpm install 下載依賴 node_module 模塊  能夠在目錄下面看到 node 依賴模塊已經下載好了。

             

 

            5. 到了最後一步了：輸入 cnpm run dev 

 

             因爲我一開始建立過一個項目，node 的 8080 端口被佔用了，因此下面就報錯了，如圖：

             

 

       一個簡單粗暴的方法就是關閉當前的 node 進程：  

      

 

     最最最最最最最最最最最最最最最最最最最最最最最最最最最後一步：

     

   

     下面咱們打開 http://localhost:8080 看看吧。終於成功了！！！

 

      

 

 

PS: 記錄一些命令

1. $ cnpm install --global vue-cli2. $ vue init webpack-simple demo3. $ cd demo/4. $ cnpm install5. $ npm run dev