idea中搭建vue（詳細版）

本人也是剛剛學習vue，在搭建的過程中碰到了許多問題，在這里和大家分享一下我的搭建過程，一開始對於vue各種概念一頭霧水，先和大家說一下vue搭建所涉及的工具概念。

一.基本概念：

1.Vue

Vue.js 是目前最火的一個前端框架，它和Angular.js、React.js 一起，並成為前端三大主流框架。Vue.js 是一套構建用戶界面的框架，只關注視圖層，它不僅易於上手，還便於與第三方庫或既有項目整合。（Vue有配套的第三方類庫，可以整合起來做大型項目的開發），前端的主要工作，主要負責MVC中的V這一層，主要工作就是和界面打交道，來制作前端頁面效果。Vue 的核心庫只關注視圖層，它不僅易於上手，還便於與第三方庫或既有項目整合

2.node.js

Node.js是一個Javascript運行環境(runtime)，發布於2009年5月，由Ryan Dahl開發，實質是對Chrome V8引擎進行了封裝。Node.js對一些特殊用例進行優化，提供替代的API，使得V8在非瀏覽器環境下運行得更好。V8引擎執行Javascript的速度非常快，性能非常好。 Node.js是一個基於Chrome JavaScript運行時建立的平台， 用於方便地搭建響應速度快、易於擴展的網絡應用。Node.js 使用事件驅動， 非阻塞I/O模型而得以輕量和高效，非常適合在分布式設備上運行數據密集型的實時應用。總結一下，node,js提供了javascript在瀏覽器以外的一個執行環境，滿足一些特定的場景需求。

3.npm

npm 是 nodejs 的包管理和分發工具。它可以讓 javascript 開發者能夠更加輕松的共享代碼和共用代碼片段，並且通過 npm 管理你分享的代碼也很方便快捷和簡單。通過npm可以更方便的引用和分析基於nodejs開發的類庫和插件。

4.Webpack

WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包為合適的格式以供瀏覽器使用。通過webpack可以把基於模塊開發的前端工程代碼打包成可以在瀏覽器使用的格式。

5.vue-cli

vue腳手架指的是vue-cli，它是一個專門為單頁面應用快速搭建繁雜的腳手架，它可以輕松的創建新的應用程序而且可用於自動生成vue和webpack的項目模板。

vue-cli是有Vue提供的一個官方cli，專門為單頁面應用快速搭建繁雜的腳手架。它是用於自動生成vue.js+webpack的項目模板，是為現代前端工作流提供了 batteries-included的構建設置。只需要幾分鍾的時間就可以運行起來並帶有熱重載，保存時 lint 校驗，以及生產環境可用的構建版本。

6.相互之間的關系

npm install是幫助安裝 vue,或React到本地，npm install也可以安裝vue,React的開發工具。當然你完全可以像jQuery一樣自己找網站下載下來，在頁面中引入。 npm就好比是一個前端的插件商店，里面有各種開發者寫的包，你需要的時候就從命令行安裝就可以了，類似與linux的apt的概念。 node.js是服務端，瀏覽器端js有很多缺陷，比如不能操作本地文件吶。而服務端的js就可以，所以用node就能幫我們管理文件，處理I/O，然后經過牛逼的開發者一封裝，一改造，一個grunt就出來了。

 vue的開發本身是不依賴node的，不過vue的腳手架工具vue-cli里面集成的webpack是基於node開發出來的。 因此只能說webpack是依賴node的。

 

 二.vue安裝流程:

1.安裝node.js npm也隨着安裝

安裝node.js下載地址：https://nodejs.org/zh-cn/

在cmd中輸入node -v查看是否安裝成功：

 

 

由於npm在國內鏡像安裝緩慢，建議使用淘寶鏡像，以后用到npm的滴地方就用cnpm代替就行了

在cmd命令框運行命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝完成后檢驗是否安裝完成，運行cnpm -v查看版本

 2.下載vue-cli

在cmd中輸入npm install @vue/cli -g，自動下載vue-cli.-----------------------------------卸載vue-cli在cmd中輸入npm uninstall vue-cli -g

測試是否安裝成功： vue -V //注意：-V是大寫的V，不是小寫的v

輸入 vue init webpack 項目名 創建一個新項目

3.在idea中下載vue.js插件

如何安裝vue.js請看https://www.jb51.net/article/170884.htm

4.安裝webpack工具

cnpm install -g webpack

5.下載git，不然在搭建腳手架是會報找不到git

6.基本工具安裝完成后，開始創建項目

在cmd中輸入-------vue init webpack 項目名

 

 

 創建成功的項目的目錄結構：

 

 

我們還少一個文件夾：nodo_modules,這個文件夾是整個項目依賴包的文件夾。

1.第一步：cd test進入test的項目（必須進入項目里才能安裝啊!!）

 

 

2.第二步：cnpm install (此處可以用cnpm代替npm,如果你安裝了阿里的鏡像)

 

 安裝完成項目結構

 

7.在idea中打開上邊新建的vue項目，在idea中的Terminal中輸入cnpm run dev

運行成功展示：htttp://localhost:8080

 

 

8.可能遇到的報錯

1.到創建Vue項目，即是在輸入vue init webpack my-first-vue 回車鍵之后顯示：

Command vue init requires a global addon to be installed.

Please run npm install -g @vue/cli-init and try again.

解決辦法：npm install -g @vue/cli-init 運行這個 在創建項目