Vue之使用腳手架搭建Vue工程

2021-08-08 04:05:35 字數 1447 閱讀 7042

1、新建乙個空資料夾,我們利用這個空資料夾來放置我們的vue專案,注意:最好不要使用中文名稱哦。

輸入命令(此處我使用的 cnpm ) :cnpm  install  -g vue-cli

再次在命令列介面輸入指令 :vue

出現以下資訊就是安裝成功了。

4、下面,我們就可以使用 vue-cli 腳手架來搭建vue工程。

命令列介面輸入 :vue   init   模板名稱  工程名稱

注:模板名稱 一般我們使用 webpack-******

再去看看我們的放置vue工程的檔案,裡面多了乙個工程。

5、要怎麼執行啟動這個工程呢?

我們現在使用的是node環境來執行,一般在開發過程中使用,專案部署的時候會打包成靜態資源發布到伺服器。

開啟這個工程,輸入命令列( 此處使用的是 cnpm ) :cnpm install

6、執行工程

命令 :npm run dev

成功會自動彈出瀏覽器,預設埠:8080 如果埠被占用,請修改工程埠。

7、專案部署

直接在工程目錄 開啟命令列介面,輸入命令 :npm run build

工程資料夾裡面生成乙個dist靜態資源檔案,將這個檔案發布到web伺服器就行了。

搭建Vue腳手架

從vue官網安利了一波安裝腳手架的主要 全域性安裝 vue cli npm install global vue cli 建立乙個基於 webpack 模板的新專案 vue init webpack my project 安裝依賴,走你 cd my project npm install npm r...

Vue腳手架搭建

sudo apt get install nodejs legacy nodejs sudo apt get install npm 安裝成功後檢視對應版本 npm install vuenpm install g cnpm registry vue安裝成功後檢視對應版本 npm install g...

vue腳手架搭建

一 vue cli腳手架的搭建步驟 首先,確定你的電腦上已經安裝了nodejs,可以使用npm包管理器安裝環境 1 開啟cmd命令視窗,切換到你要新建專案的資料夾下,此時可使用node v檢查node的版本,如果出現版本號則node已安裝。2 使用以下命令全域性安裝vue cli npm insta...