用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/

在瀏覽器出現如下界面即可