vue2 0配置環境以入門例項

2022-03-08 15:55:17 字數 2077 閱讀 7850

• node.js環境(npm包管理器)

• vue-cli 腳手架構建工具

• cnpm  npm的**映象

npm包管理器,是整合在node中的,所以,直接輸入 npm -v就會如下圖所示,顯示出npm的版本資訊。

node環境已經安裝完成,npm包管理器也有了。由於有些npm有些資源被遮蔽或者是國外資源的原因,經常會導致用npm安裝依賴包的時候失敗

,所有我還需要npm的國內映象---cnpm

安裝cnpm

在命令列中輸入 npm install -g cnpm --registry= 然後等待,安裝完成如下圖。

完成之後,我們就可以用cnpm代替npm來安裝依賴包了。如果想進一步了解cnpm的,檢視**npm映象官網。

安裝vue-cli腳手架構建工具

在命令列中執行命令 npm install -g vue-cli ,然後等待安裝完成。

通過以上三部,我們需要準備的環境和工具都準備好了,接下來就開始使用vue-cli來構建專案。

用vue-cli構建專案

要建立專案,首先我們要選定目錄,然後再命令列中把目錄轉到選定的目錄。在這裡,我選擇d:來存放新建的專案,則我們需要先把目錄cd到桌面,如下圖。

在d:目錄下,在命令列中執行命令 vue init webpack firstvue2 。解釋一下這個命令,這個命令的意思是初始化乙個專案,其中webpack是構建工具,也就是整個專案是基於webpack的。其中firstvue2是整個專案資料夾的名稱,這個資料夾會自動生成在你指定的目錄中(我的例項中,會在d:生成該資料夾),如下圖。

執行初始化命令的時候回讓使用者輸入幾個基本的選項,如專案名稱,描述,作者等資訊,如果不想填直接回車預設就好。

這就是整個專案的目錄結構,其中,我們主要在src目錄中做修改。這個專案現在還只是乙個結構框架,整個專案需要的依賴資源都還沒有安裝,如下圖。

安裝專案所需的依賴

要安裝依賴包,首先cd到專案資料夾(firstvue2資料夾),然後執行命令 cnpm install ,等待安裝。

安裝完成之後,會在我們的專案目錄firstvue2資料夾中多出乙個node_modules資料夾,這裡邊就是我們專案需要的依賴包資源。

安裝完依賴包之後,就可以執行整個專案了。

執行專案

在專案目錄中,執行命令 npm run dev ,會用熱載入的方式執行我們的應用,熱載入可以讓我們在修改完**後不用手動重新整理瀏覽器就能實時看到修改後的效果。

這裡簡單介紹下 npm run dev 命令,其中的「run」對應的是package.json檔案中,scripts欄位中的dev,也就是 node build/dev-server.js命令的乙個快捷方式。

專案執行成功後,瀏覽器會自動開啟localhost:8080

搭建Vue2 0開發環境

1 必須要安裝nodejs 2 搭建vue的開發環境 安裝vue的腳手架工具 官方命令列工具 npm install global vue cli cnpm install global vue cli 此命令只需要執行一次 3 建立專案 必須cd到對應的乙個專案裡面 vue init webpac...

Vue2 0 多入口配置

目錄 2.修改構建目錄下的檔案 a.首先修改webpack.base.conf.js檔案。改為多入口,對應為應用程式目錄下的兩個main.js檔案 b.修改webpack.dev.conf.js檔案配置。兩個htmlwebpackplugin。模板選項對話對應的應用程式目錄下的兩個html檔案。樹幹...

vue 2 0 的專案配置

vue 2.0 的專案配置 1 vue腳手架指的是vue cli,它是乙個專門為單頁面應用快速搭建繁雜的腳手架,它可以輕鬆的建立新的應用程式而且可用於自動生成vue和webpack的專案模板 2 搭建步驟 全域性安裝 cnpm install vue cli g vue v 檢測版本 例項化乙個專案...