vue項目搭建隨記

工具介紹

• npm

            NPM的全稱是Node Package Manager ，是一個NodeJS包管理和分發工具，已經成爲了非官方的發佈Node模塊(包)的標準。有了NPM，能夠很快的找到特定服務要使用的包，進行下載、安裝以及管理已經安裝的包。

• vue-cli

            至關於腳手架，經過官方模板能夠幫你自動生成模板工程

            安裝：npm install -g vue-cli

            詳見：http://webpackdoc.com/

• webpack

            Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它能夠將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還能夠將按需加載的模塊進行代碼分隔，等到實際須要的時候再異步加載。經過 loader 的轉換，任何形式的資源均可以視做模塊，好比 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。

            安裝：npm install webpack -g

            詳見：http://webpackdoc.com/

 

項目搭建

• vue init webpack my-vue

            

            經過官方模板生成項目my-veu

• npm install

            安裝依賴

• npm run dev

            啓動項目，該命令會將項目編譯到內存，並不會生成build文件

• npm run build           

            生成build文件

 

經常使用插件安裝命令

•  element-ui ：基於 Vue 2.0 的組件庫

            安裝：npm i element-ui@next -save

             詳見： http://element.eleme.io/#/

•   vue-router 2 ： vue路由插件 支持單頁應用

              安裝：npm install vue-router -save

               詳見：http://router.vuejs.org/zh-cn/installation.html

•    vue-resource ： 與後端數據交互

               安裝：npm install vue-resource -save

                詳見：http://www.cnblogs.com/keepfool/p/5657065.html