vue的使用(引用 建立vue專案)(一)

2021-10-20 15:16:55 字數 1337 閱讀 5652

在程式開發中,有三種方式建立vue專案,本地引入vuejs、使用cdn引入vuejs、使用vue-cli建立vue專案。其中vue-cli可以結合webpack打包工具使用,大大方便了開發步驟,使用廣泛。

一、vue本地引用

二、通過cdn方法引用

unpkg:

會保持和 npm 發布的最新的版本一致。(推薦使用)

bootcdn(國內)國內不穩定

三、npm

在用 vue 構建大型應用時推薦使用 npm 安裝。npm 能很好地和諸如 webpack 或 browserify 模組打包器配合使用。同時 vue 也提供配套工具來開發單檔案元件。

2、安裝完成後,進行nodejs版本及npm版本檢視。

開啟cmd命令列,輸入 node -v 和 npm -v,node安裝後將會自動安裝上npm,但不一定是最新的,可用命令 npm install -g npm,進行最新版本安裝。

安裝好之後,就可以使用vue-cli進行初始化乙個vue專案。

二、vue專案初始化

使用**npm 映象

npm install -g cnpm --registry=

全域性安裝 vue-cli

cnpm install vue-cli -g

檢視vue-cli是否安裝成功

vue list

選定路徑

cd c:\users\administrator\desktop\vueproject

新建vue專案

vue init webpack 專案名

(按照提示資訊,進行建立專案,一般預設直接選擇yes)

開啟專案目錄:會看到vue的乙個初始化結構

build——專案構建(webpack)相關**。

config——基本配置資訊,如埠等,此處初學我們可以預設。

node_modules——npm載入的專案依賴模組。

static——靜態資源目錄。在打包發布後將用於存放靜態資源。

test——初始測試目錄,可以刪除。

index.html ——首頁入口檔案。

package.json ——專案配置檔案,此處初學我們可以預設。

.***x檔案 ——一些配置檔案,包括語法配置,git配置等,此處初學我們可以預設。

readme.md 檔,為markdown 格式 。

三,啟動執行專案

進入專案根目錄,執行命令:npm run dev

瀏覽器:http://localhost:8080/

解決vue不能自動開啟瀏覽器的問題:開啟config ==> index.js 配置中找到autoopenbrowswe,預設設定的是false,然後改為true就可以了

使用vue建立專案

在桌面建立乙個vue資料夾用來放置專案 終端輸入 cd desktop vue vue init webpack vuetest vuetest是專案名字 然後一路回車 進入專案 cd vuetest cnpm install 第一次建立時需要 以後開啟就不需要 cnpm run dev 如果dev...

vue 建立vue專案

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

vue怎麼自己建立元件並引用 vue專案中引入元件

最近在重構乙個vue專案,恨自己當初第一次學的時候沒有寫部落格。現在翻以前自己做的紙質版筆記,不能看,太混亂。所以趁這個時間總結一下。vue是元件化的開發。乙個頁面中,是乙個元件,他也是由多個元件構成的。第乙個問題,專案中怎麼引入頁面?使用v cli自動搭建腳手架,他已經給我們配好了路由,還做好了乙...