1. 程式人生 > >vue-cli 項目搭建

vue-cli 項目搭建

blog align ins npm 命令行 工程 系統 代碼檢查 tro

vue-cli是什麽?

vue-cli 是一個官方發布 vue.js 項目腳手架,用於自動生成vue.js模板工程的。

一、Node.js安裝

首先需要安裝node環境,地址:https://nodejs.org/en/download/

驗證Node是否安裝成功

windows操作系統中按住win+R鍵在彈出的窗口中輸入cmd。如圖所示!

技術分享

在命令行中輸入 node -v 和 npm -v,如果能顯示出版本號,就說明安裝成功。如圖所示

技術分享

二、安裝vue-cli

1. npm install vue-cli -g 安裝 vue命令環境

驗證安裝ok?

vue --version

2. 生成項目模板

vue init <模板名> 本地文件夾名稱 例如:vue init webpack-simple my-project

技術分享

模板如下:

browserify--全功能的Browserify + vueify,包括熱加載,靜態檢測,單元測試

browserify-simple--一個簡易的Browserify + vueify,以便於快速開始。

webpack--全功能的Webpack + vueify,包括熱加載,靜態檢測,單元測試

webpack-simple--一個簡易的Webpack + vueify,以便於快速開始,沒有代碼檢查

3. 進入到生成目錄裏面

cd my-project

技術分享

4.安裝依賴

npm install

技術分享

5.開始運行

npm run dev

技術分享

在瀏覽器打開http://localhost:8080,則可以看到歡迎頁了。

技術分享

vue-cli 項目搭建