1. 程式人生 > >vue2.0-下載安裝vue,搭建第一個項目

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

下一步 安裝 msi guid class 名稱 pac IE 管理

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項目,感覺自己棒棒噠~(遇到問題,百度是最快的解決方法!!)

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