vue2.0-下載安裝vue,搭建第一個項目

Vue.js 是什麼

Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。

具體的vue詳情，看vue的官方文檔~https://cn.vuejs.org/v2/guide/index.html

下面就是學習vue的第一步：下載安裝，配置環境，搭建一個vue項目。

一：node.js環境（npm包管理器）

 

1.下載安裝：

https://nodejs.org/zh-cn/download/，下載node.js,根據本身的電腦位數進行不一樣的選擇，我下載的則是X64的msi文件。

直接下一步下一步安裝就好，最好不要安裝在C：（PS：你們最好把編程工具放在一個文件夾裏，方便使用。）

安裝成功後，打開命令提示符（win+R）。這是系統自帶的，我是下載git Bash,由於git Bash使用的是Linux命令。

輸入上述命令，就能夠獲得node和npm的版本號，則證實安裝成功。

由於npm是訪問國外的網站，因此速度較慢。咱們可使用淘寶鏡像

在命令行輸入：

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

安裝完成，就可使用cnpm，和使用npm是同樣的，可是速度會快不少。

 

2.環境配置

環境配置主要是配置npm安裝的全局模塊所在的路徑，以及緩存cache的路徑。

先在安裝好的node.js的文件夾下，建立2個文件夾【node_global】和【node_modules】

個人電腦--》屬性--》高級系統配置--》環境變量

進行下面的操做：

 

 二：安裝vue-cli腳手架工具。

命令行輸入：

npm install -g vue-cli

安裝成功後，就能夠用vue-cli去構建項目了。

進入到你要構建的項目目錄，運行輸入：

vue init webpack 項目名稱

接下來會讓你確認項目名字等等，

 通常簡單的就能夠不測試了，直接回車也能夠。

到你安裝項目的地方，就能夠運行了。

npm run dev

（奇怪，之前是能夠運行的）

可是運行時出現問題：

通過查找，發現是 webpack 的新版本的BUG，解決方法就是卸載新版本，安裝老版本。

npm remove webpack-dev-server

npm install webpack-dev-server@2.9.1

npm run dev

就能夠跑起來運行了~

 

可是你會發現會有不少的警告！是由於eslint語法檢查工具，會設置比較嚴格。

怎麼辦 ，最好是在編譯時去除警告。

在build/webpack.base.conf;js文件裏，註釋或者刪掉：module->rules中有關eslint的規則

 

而後從新運行就能夠了~

這樣就搭建好了第一個vue項目，感受本身棒棒噠~（遇到問題，百度是最快的解決方法！！）