天天看點

vue之cli腳手架安裝和webpack-simple模闆項目生成

ue-cli 是一個官方釋出 vue.js 項目腳手架,使用 vue-cli 可以快速建立 vue 項目。

GitHub位址是:​​https://github.com/vuejs/vue-cli​​

一、安裝Nodejs

首先需要安裝Node環境。安裝完成之後,可以在指令行工具中輸入node -v和npm -v,如果能顯示出版本号,就說明安裝成功。

二、安裝vue-cli

安裝好node之後,我們就可以直接全局安裝vue-cli:

npm install -g vue-cli      

使用這種方式可能會安裝比較慢,推薦大家使用國内的淘寶鏡像來安裝。(之前安裝過了就不過多贅述了)

cnpm install -g vue-cli      

如果安裝失敗,可以使用 npm cache clean 清理緩存,然後再重新安裝。後面的安裝過程中,如有安裝失敗的情況,也需要先清理緩存

安裝完成後,可以使用vue -V(大寫的V)檢視vue的版本。

vue之cli腳手架安裝和webpack-simple模闆項目生成

如果接下來你不知道要幹嘛,那麼你可以在指令行中輸入

vue -help      

它會有以下提示:

vue之cli腳手架安裝和webpack-simple模闆項目生成

懂點英語的意思應該能看到提示的資訊,聰明的你此時接下來執行vue list看看有哪些可用的官網模闆:

vue list      
vue之cli腳手架安裝和webpack-simple模闆項目生成

Vue.js官方提供了兩種類型的模闆項目:

  • 基于vue cli和browserify的項目模闆
  • 基于vue cli和webpack的項目模闆

vue cli是Vue.js官方提供的指令行建立Vue.js項目腳手架的工具。這兩種類型的項目模闆分别提供了簡單模式和完全模式,簡單模式僅包含基于vue.js開發必要的一些資源和包,使用該模式可以快速地投入到開發。完全模式則還包括ESLink、單元測試等功能。

我們在這裡使用webpack的項目模闆。沒有為什麼,因為webpack有點叼叼的。

我們今天玩一下webpac-simple 基于webpack的簡單模闆。

再重申一遍,一定要使用指令行工具切換到你目前的目錄下,類似這樣

vue之cli腳手架安裝和webpack-simple模闆項目生成

然後執行:

vue init webpack-simple my-project      

 init :初始化我們的項目。

webpack-simple:使用的哪個模闆,這裡我們先使用webpack-simple模闆

my-project:表示我們項目的名字,這名字可以自己命名,但不要起成系統軟體的一些名字,比如vue,node,npm等

 執行如下指令

vue init webpack-simple my-project      
vue之cli腳手架安裝和webpack-simple模闆項目生成

接下來根據提示操作:

切換到目前目前,一定切換進來

cd my-project      

下載下傳目前項目所依賴的包

npm install      

啟動目前的項目

npm run dev      

接下來見證奇迹的時刻來了,我們第一個vue的項目。隻要出現如下界面,證明項目啟動成功了。

繼續閱讀