這篇文章給大家分享的是有關安裝vue.js前需要先安裝什么的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)公司主營德令哈網站建設的網絡公司,主營網站建設方案,成都app開發(fā),德令哈h5小程序定制開發(fā)搭建,德令哈網站營銷推廣歡迎德令哈等地區(qū)企業(yè)咨詢

安裝vue.js需要安裝node.js，其安裝vue.js的具體方法是：首先安裝node.js；然后安裝淘寶鏡像；接著安裝Vue，并安裝全局vue-cli腳手架；最后檢查Vue是否安裝成功即可。

安裝vue.js前需要先安裝什么？

安裝vue.js前需要先安裝node.js，安裝官網最新的即可，版本應該要大于6.0版本。

這樣就可以使用node.js自帶的npm工具來安裝vue.js及其相關工具了。

npm：Nodejs下的包管理器。通過npm可以安裝、共享、分發(fā)代碼，管理項目依賴關系。

使用npm安裝Vue可以方便包管理。然后直接使用Vue命令，會使用webpack工具，創(chuàng)建項目，前端構建工具會讓前端開發(fā)更加高效。

使用npm安裝vue.js的步驟

步驟一：安裝node.js

如下圖所示，在終端上輸入以下命令確認你電腦上已經安裝node.js并且npm的版本大于3.0，如果npm版本小于3.0，可以輸入$ cnpm install npm -g進行升級。

步驟二：安裝淘寶鏡像

由于 npm 安裝速度慢，所以本文使用淘寶鏡像及其命令 cnpm進行安裝，輸入$ npm install -g cnpm --registry=https://registry.npm.taobao.org安裝淘寶鏡像。

步驟三：安裝Vue

輸入$ cnpm install vue ，回車等待終端給出響應。

步驟四：安裝全局vue-cli腳手架

輸入$ cnpm install --global vue-cli,安裝全局vue-cli腳手架，用于快速搭建大型單頁應用。

步驟五：檢查Vue是否安裝成功

輸入$ vue -V檢查是否安裝成功，如果返回版本號則說明安裝成功。

出現(xiàn)了版本號說明安裝成功

步驟六：查看官網提供的模板(這個步驟可以省略)

六個模板中我們主要使用webpack模板，原因如下:

WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），并將其打包為合適的格式以供瀏覽器使用。

步驟七：創(chuàng)建一個基于 webpack 模板的新項目

終端切換到你的目標目錄下創(chuàng)建一個項目，這里以在桌面創(chuàng)建一個叫做vue-project的項目為例:輸入vue init webpack vue-project，終端會給你返回如下內容：

# 這里需要進行一些配置，默認回車即可
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 vue-project
? Project name vue-project
? Project description A Vue.js project
? Author 5Iris5 <1847370****@163.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
   vue-cli · Generated "my-project".
   To get started:
   
     cd vue-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

這里沒有放原圖是因為，我在這個環(huán)節(jié)出錯了，原因后面會詳細記錄。正常情況下，運行到這個步驟后，你的界面應該依次出現(xiàn)如上所示的三條命令。

步驟八：根據提示依次輸入以下三條命令

// 進入項目
$ cd vue-project
// 安裝依賴
$ cnpm install
// 測試環(huán)境是否搭建成功
$ cnpm run dev

步驟九：運行

成功執(zhí)行以上命令后訪問 http://localhost:8080/，輸出結果如下所示：

感謝各位的閱讀！關于“安裝vue.js前需要先安裝什么”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！