首頁  >  文章  >  web前端  >  安裝vue.js需要安裝什麼

安裝vue.js需要安裝什麼

藏色散人
藏色散人原創
2021-01-05 09:33:295113瀏覽

安裝vue.js需要安裝node.js,其安裝vue.js的具體方法是:首先安裝node.js;然後安裝淘寶鏡像;接著安裝Vue,並安裝全域vue-cli腳手架;最後檢查Vue是否安裝成功即可。

安裝vue.js需要安裝什麼

本教學操作環境:windows7系統、vue2.0&&Node.js v14.15.3版本,Dell G3電腦。

相關推薦:《vue.js教學

#安裝vue.js前需要先安裝什麼?

安裝vue.js前需要先安裝node.js,安裝官網最新的即可,版本要大於6.0版本。

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

npm:Nodejs下的套件管理器。透過npm可以安裝、分享、分發程式碼,管理專案依賴關係。

使用npm安裝Vue可以方便套件管理。然後直接使用Vue指令,會使用webpack工具,創建項目,前端建置工具會讓前端開發更有效率。

使用npm安裝vue.js的步驟

步驟一:安裝node.js

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

安裝vue.js需要安裝什麼

步驟二:安裝淘寶鏡像

由於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檢查是否安裝成功,如果傳回版本號碼則表示安裝成功。

安裝vue.js需要安裝什麼

出現了版本號碼說明安裝成功

步驟六:檢視官網提供的範本(這個步驟可以省略)

安裝vue.js需要安裝什麼

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

WebPack可以看做是模組打包機:它做的事情是,分析你的專案結構,找到JavaScript模組以及其它的一些瀏覽器不能直接運行的拓展語言(Scss,TypeScript等),並將其打包為合適的格式以供瀏覽器使用。

步驟七:建立一個基於webpack 模板的新項目

終端切換到你的目標目錄下建立一個項目,這裡以在桌面建立一個叫做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

這裡沒有放原圖是因為,我在這個環節出錯了,原因後面會詳細記錄。正常情況下,運行到這個步驟後,你的介面應該依序出現如上所示的三個指令。

步驟八:依提示依序輸入以下三條指令

// 进入项目
$ cd vue-project
// 安装依赖
$ cnpm install
// 测试环境是否搭建成功
$ cnpm run dev

步驟九:執行

成功執行上述指令後造訪http://localhost:8080/,輸出結果如下圖所示:

安裝vue.js需要安裝什麼

#

以上是安裝vue.js需要安裝什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn