Vue Vue2 0搭建腳手架

2022-02-02 05:39:20 字數 1869 閱讀 2274

隨著vue.js越來越火爆,更多的專案都用到vue進行開發,在實際的開發專案中如何搭建腳手架呢?今天就來跟大家分享一下如何使用vue-cli搭建腳手架。

安裝完成以後進入node.js的安裝目錄:d:\program files\nodejs\(這裡是我本機安裝的目錄,其他機器目錄可能不同),你會發現裡面自帶了npm,直接用npm安裝環境即可。

說明:npm(node package manager)是node.js的包管理器,用於node外掛程式管理(包括安裝、解除安裝、管理依賴等)。

使用npm安裝外掛程式:命令提示符執行 npm install 。

安裝命令:npm install -g cnpm --registry=

檢視版本:輸入cnpm-v,可以檢視當前cnpm的版本。

注意:安裝cnpm的時候不是安裝在node.js安裝的地方,要在建立的專案目錄下面安裝。

vue-cli提供了乙個官方命令列工具,可以用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置,帶來現代化的前端開發流程。只需幾分鐘即可建立並啟動乙個帶熱過載、儲存時靜態檢查以及可用於生成環境的構建配置的專案。

命令:$ cnpm install vue-cli -g。如下圖所示:

注意:g表示全域性安裝。

出現如下的介面表示安裝完成:

安裝完成之後輸入 vue -v(注意這裡是大寫的"v"),如下圖所示,如果出現相應的版本號,則說明安裝成功。

要建立專案,首先我們要選定目錄,然後在命令列中把目錄轉到選定的目錄。可以使用下面的命令:

輸入命令以後直接按回車執行:

執行初始化命令的時候會讓使用者輸入幾個基本的選項,如專案名稱、描述、作者等資訊。例如:

project name (myvuedemo) :專案名稱,這裡是myvuedemo。

project description (a vue.js project):專案描述,這裡是「我的第乙個vue專案」。

author:作者。

install vue-router? (y/n):是否安裝vue路由,也就是以後是spa(但頁面應該需要的模組)。

use eslint to lint your code?(y/n):使用eslint到你的**。

pick an eslint preset (use arrow keys):選擇乙個預置eslint(使用箭頭鍵)。

set up unit tests (y/n) y:設定單元測試。

setup e2e tests with nightwatch? (y/n) :設定端到端測試。

輸入下面的命令:$ cnpm run dev。

執行成功以後,根據提示,在瀏覽器中輸入http://localhost:8080,瀏覽器顯示的頁面如下:

到此為止,vue.js的腳手架搭建完成。

搭建Vue腳手架

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

搭建vue cli腳手架

前期工作準備 2.安裝 映象,因為我們用的npm的伺服器是外國,有的時候我們安裝 依賴 的時候會超級慢,所以就用這個cnpm來安裝我們說需要的 依賴 命令列輸入 npm install g cnpm registry 安裝完成後,就可以用cnpm 代替 npm 速度會快很多。3.安裝webpack,...

Vue腳手架搭建

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