vue cli 框架搭建

=============== 通知：

博主已遷至《掘金》碼字，博客園可能之後再也不更新，掘金地址：http://www.javashuo.com/article/p-hygqslqt-z.html  請多多關照！！

-------------------在此謝過！-----------

 

 

 

在命令行安裝，須要先安裝node環境 ，npm 環境, webpack環境

 

　　　　在下載vue的時候須要先確認如下幾點是否存在：

　　　　　　　　驗證node是否安裝:

　　　　　　　　　　　　node -v

　　　　　　　　驗證npm是否安裝：

　　　　　　　　　　　　npm -v

 

安裝node:

　　Windows 安裝包(.msi)

　　32 位安裝包下載地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi

　　64 位安裝包下載地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi

 

安裝webpack:

 　　　　 $ npm install webpack -g

安裝npm:

 如今安裝node就會自帶npm的安裝，並不須要另外安裝

　　git下載地址：

　　　　 $ git clone --recursive git://github.com/isaacs/npm.git  

     

（通常npm環境下載速度較慢。能夠下載淘寶鏡像cnpm來提升速度，但有時二者下載的文件版本會有細微差異）

　　淘寶鏡像： http://npm.taobao.org/

     命令：

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

 

  安裝vue腳手架: vue-cli

     命令：

          　  $ cnpm install vue-cli -g

 

    檢測vue版本：

              $  vue --version

 

使用webpack 搭建項目實例：

 

　　webpack完整版：

        　　  $ vue init webpack demo

 

      webpack 簡約版：

               $ vue init webpack-simple demo

 

　　進入項目目錄：

       　　   $ cd demo

 

　　下載安裝依賴：

   　　　　 $ cnpm install 

 

　　下載完成後啓動vue項目：

　　　　　$ npm run dev

 

      下載安裝vue router:

              $ npm install vue-router --save

 

      下載安裝Sass (關於sass/less在vue中的配置和使用會在接下來的文章詳細說明)

            $ npm install node-sass --save  

           

      下載安裝axios:

             $ npm install axios --save

 

        下載vue ui框架iview：

           $ npm install iview --save

 

　　　項目打包：

   　　　 $ npm run build

 

 

                 完