1. 程式人生 > >利用vue-cli和webpack建立一個Vue專案

利用vue-cli和webpack建立一個Vue專案

建立Vue專案

步驟如下:

1、全域性安裝vue-cli

     在工作空間下執行下面這段程式碼

cnpm install --global vue-cli

2、建立一個基於webpack模板的新專案

vue init webpack taobao

當前的taobao 就是專案的名稱,注意:專案名稱不能有大寫字母

3、填寫專案的名稱,如果預設用taobao的名字作為專案的名稱,那麼回車即可

4、專案的描述,回車用預設的即可 

5、專案的作者,回車用預設的即可 

6、如果構建這個專案,選擇  Runtime + Compiler: recommended for most users  回車即可

7、是否安裝vue-router,按需安裝即可,這裡預設不安裝,輸入n即可

8、是否使用ESLint讓我們的程式碼顯得更規範一些,選擇Y即可

9、選擇標準的ESLint的語法檢測,Standard (https://github.com/standard/standard)

10、是否需要自動化的測試工具,輸入n回車即可

11、是否用Nightwatch設定E2E測試?,輸入n即可

12、專案中的依賴包是採用npm安裝還是yarn進行安裝,這裡選擇npm, Yes, use NPM

13、出現Project initialization finished!就表示專案的初始化已經完成了

 

 

執行該Vue專案

1、進入該專案的目錄

2、利用 npm run dev 執行該專案

3、在瀏覽器輸入 http://localhost:8081 進行訪問

4、如果出現如下頁面即表示vue專案執行成功了