使用Vue創建一個新項目


1、環境

保證已經安裝好了node\npm\vue等工具,將路徑設置為想要建立新項目的文件夾路徑

2、關於npm與cnpm
 npm包管理器,是集成在node中的,node環境安裝完成,npm包管理器也有了。由於有些npm有些資源被屏蔽或者是國外資源的原因,經常會導致后面用npm安裝依賴包的時候失敗,所有我還需要npm的國內鏡像---cnpm。

安裝cnpm:

在命令行中輸入

npm install -g cnpm --registry=http://registry.npm.taobao.org

然后等待,完成之后,我們就可以用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,里面就是我們項目需要的依賴包資源,安裝完依賴包之后,就可以運行整個項目了

6、運行項目

在項目目錄中,運行的命令如上面一種所示,

npm run dev

會用熱加載的方式運行我們的應用,熱加載可以讓我們在修改完代碼后不用手動刷新瀏覽器就能實時看到修改后的效果。

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM