用Webstrom搭建Vue項目

一.首先要有Node.js   Webpack環境

1.Node.js：是一個可以在服務器端運行JavaScript的開放源代碼，跨平臺JavaScript運行環境。Node採用Google開發的V8引擎運行JS代碼，使用事件驅動、非阻塞和異步I/O模型等技術來提升性能，可優化應用程序的傳輸量和規模。

Node.js 的包管理器 npm，是全球最大的開源庫生態系統。

2.npm：全稱爲Node Package Manager，是一個基於Node.js的包管理器。對於Node而言，npm幫助其完成了第三方模塊的發佈、安裝和依賴等。藉助npm,node與第三方模塊之間造成了一個很好的一個生態系統。

npm的初衷：JavaScript開發人員更容易分享和重用代碼。

 

npm版本查看：npm -v 

顯示版本號，說明已安裝

3.Webpack:是一個模塊打包器。在Webpack看來，前端的全部資源文件（js/json/css/img/...）都會做模塊，它將根據模塊間的依賴關係進行靜態分析，生成對應的靜態資源。

安裝Webpack：         npm install Webpack -g  (全局)

                               npm install Webpack --save--dev   (局部)

Webpack版本查看：    Webpack -v

出現版本號，則安裝成功

二.建立模板項目

Vue-cli說明：

1. vue-cli 是 vue 官方提供的腳手架工具

2.  github: https://github.com/vuejs/vue-cli

3.  做用: 從 https://github.com/vuejs-templates 下載模板項目

1.安裝Vue-cli,安裝以後有Vue命令             npm install -g Vue-cli

2.指定模塊名稱和項目名稱（項目名稱不能有大寫字母,這裏我用vue_demo）         vue init Webpack vue_demo 

    

均可以選擇默認，直接回車，也能夠根據本身所需依次回覆Yes/no

3.建立以後進入       cd vue_demo

在當前目錄安裝包    npm install

開發環境打包運行     npm run dev

4.訪問 ：http://localhost:8080/

在瀏覽器出現以下界面便可