1. 程式人生 > >使用vue-cli 構建專案

使用vue-cli 構建專案

1、開啟cmd命令視窗,進入專案目錄,執行

vue init webpack myfirstvue

2、輸入命令後,會跳出幾個選項讓你回答:

  • Project name (myfirstvue): -----專案名稱,直接回車,按照括號中預設名字(注意這裡的名字不能有大寫字母,如果有會報錯Sorry, name can no longer contain capital letters)
  • Project description (A Vue.js project): ----專案描述,也可直接點選回車,使用預設名字
  • Author (): ----作者,輸入你的名字
    接下來會讓使用者選擇:
  • Runtime + Compiler: recommended for most users 執行加編譯,既然已經說了推薦,就選它了
    Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 僅執行時,已經有推薦了就選擇第一個了
  • Install vue-router? (Y/n) 是否安裝vue-router,這是官方的路由,大多數情況下都使用,這裡就輸入“y”後回車即可。
  • Use ESLint to lint your code? (Y/n) 是否使用ESLint管理程式碼,ESLint是個程式碼風格管理工具,是用來統一程式碼風格的,一般專案中都會使用。
    接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預設,編寫vue專案時的程式碼風格,直接y回車
  • Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試,我選擇安裝y回車
  • Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試 ,我選擇安裝y回車

3、回答完畢後就開始構建專案了。

配置完成後,可以看到目錄下多出了一個專案資料夾myfirstvue,然後cd進入這個資料夾:
安裝依賴:

npm install

( 如果安裝速度太慢。可以安裝淘寶映象,開啟命令列工具,輸入:
npm install -g cnpm --registry=https://registry.npm.taobao.org
然後使用cnpm來安裝 )

4、安裝完成後,在專案根目錄執行如下命令:

npm run dev

如下圖:

最後,出現釋出的地址:

開啟瀏覽器,訪問即可