安裝vue.js需要安裝node.js,其安裝vue.js的具體方法是:首先安裝node.js;然後安裝淘寶鏡像;接著安裝Vue,並安裝全域vue-cli腳手架;最後檢查Vue是否安裝成功即可。
本教學操作環境: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進行升級。
步驟二:安裝淘寶鏡像
由於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檢查是否安裝成功,如果傳回版本號碼則表示安裝成功。
出現了版本號碼說明安裝成功
步驟六:檢視官網提供的範本(這個步驟可以省略)
#六個模板中我們主要使用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需要安裝什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!