使用Vue建立乙個新專案

2022-08-15 08:00:14 字數 1562 閱讀 8730

保證已經安裝好了node\npm\vue等工具,將路徑設定為想要建立新專案的資料夾路徑

2、關於npm與cnpm

npm包管理器,是整合在node中的,node環境安裝完成,npm包管理器也有了。由於有些npm有些資源被遮蔽或者是國外資源的原因,經常會導致後面用npm安裝依賴包的時候失敗,所有我還需要npm的國內映象---cnpm。

安裝cnpm:

在命令列中輸入

npm install -g cnpm --registry=

然後等待,完成之後,我們就可以用cnpm代替npm來安裝依賴包了

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

在命令列中執行命令

cnpm install -g vue-cli 

然後等待安裝完成。(注意,這裡使用cnpm來替代npm,不然速度超級慢,會導致卡在那)

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

4、構建結構框架

腳手架裝完後,在命令列中執行命令

vue init webpack firstvue

這個命令的意思是初始化乙個專案,其中webpack是構建工具,也就是整個專案是基於webpack的。其中firstlsqvue是整個專案資料夾的名稱,自定義,這個資料夾會自動生成在你指定的目錄中.

執行初始化命令的時候回讓使用者輸入幾個基本的選項,如專案名稱,描述,作者等資訊,如果不想填直接回車預設就好,隨後,資料夾中就會出現很多基本的目錄結構和**。其中,我們主要在src目錄中做修改。到這裡,這個專案現在還只是乙個結構框架,整個專案需要的依賴資源(就是前面說到的npm安裝依賴包)都還沒有安裝。

5、安裝專案所需的npm依賴包(使用前面的cnpm)

要安裝依賴包,首先cd到專案資料夾(firstlsqvue資料夾)

cd firstlsqvue

然後執行命令

cnpm install

安裝完成後,原來的目錄結構中會出現乙個新的資料夾:node_modules,裡面就是我們專案需要的依賴包資源,安裝完依賴包之後,就可以執行整個專案了

在專案目錄中,執行的命令如上面一種所示,

npm run dev

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

vue建立新專案

新建乙個資料夾,在該資料夾路徑下開啟終端 1 vue init webpack test test 是新建的專案名稱,自己定義 2 project name test project description a vue.js project author vue build standalone i...

用pycharm建立乙個新專案

2.如何建立自己的專案 from flask import flask c 在views下建立檢視函式 from flask import blueprint,render template blue blueprint main name blue.route def index return r...

vue 新專案建立方法

安裝成功後,開啟命令列,輸入 node v 檢查版本,如果出現如下圖,則表示安裝成功。接下來就是用 npm包管理器 建立專案了。npm 是隨同 nodejs 一起安裝的包管理工具,命令列輸入 npm v 來檢查npm版本,如下圖 有些 npm 國外資源會被遮蔽,所以經常導致安裝失敗,所以建議大家安裝...