vue專案建立

2022-08-09 01:39:18 字數 1578 閱讀 3183

建立vue專案最重要的是環境搭建,

安裝好以後,node和npm的環境都搭建好了。新建乙個資料夾,用 windows powershell (shift+右鍵) 開啟命令列:

1.node -v  檢視node的版本。

2.npm -v  檢視npm的版本。

這樣就沒問題。

我們可以使用定製的 cnpm (有下劃線的關鍵字都能跳轉到官網) 命令列工具代替預設的npm,用****,這樣可以提高效率:

全域性搭建uve 互動式的專案腳手架 vue-cli:

npm install --global vue-cli
vue list 用來檢視安裝的版本:

這是正常狀態。

輸入下面命令生成vue的標準模板

vue init webpack my-vue
專案名 和 安裝vue-router 重要,其他的回車和n就行。

安裝好以後會自動出現預設模板的vue檔案了。

生成的檔案,然後我們用編輯器開啟。

這是hbuilder用開啟的,然後打來命令列,輸入命令:

npm run dev
就能看到下面返回了乙個鏈結,放到瀏覽器就能開啟了。

上面是用hbuilder開啟的,我們也可以用 intellij idea 開啟,但是我們要配置執行環境: 

我們點選新增啟動配置,選擇npm scripts 選擇dev,然後ok.

點選執行按鈕就相當於執行了npm run dev **。我們就能看到下面返回了乙個鏈結,放到瀏覽器就能開啟了。

對於前端開發者來說,通過安裝腳手架一步步建立vue專案雖然看起來很麻煩,但是建立成功後使用是非常的方便,開發vue最重要的就是元件,每乙個頁面都是乙個元件,非常的靈活,雙向繫結,和迴圈遍歷資料都非常的好用。。

vue 建立vue專案

在程式開發中,有三種方式建立vue專案,本地引入vuejs 使用cdn引入vuejs 使用vue cli建立vue專案。其中vue cli可以結合webpack打包工具使用,大大方便了開發步驟,使用廣泛。在用 vue 構建大型應用時推薦使用 npm 安裝 1 npm 能很好地和諸如 webpack ...

建立vue專案

總結官方的建立vue專案 1.安裝vue.js執行環境nodejs,可用 映象安裝,會比較快,建議安裝c盤,安裝成全域性的。命令是 npm install g cnpm registry 2.檢視安裝的版本,命令是 cnpm v3.安裝全域性腳手架,命令是 cnpm install g vue cl...

建立vue專案

1.按 windous鍵 r 輸入 cmd 開啟黑框框 2.檢查是否安裝npm,執行如下 npm v如果顯示的是版本號,則已經安裝,執行第三步 如果沒有顯示版本號,則需安裝npm npm install npm build npm run dev3.檢查是否安裝vue cli3,執行如下 npm v...