安裝vue-cli腳手架


新版本的Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli。如果你已經全局安裝了舊版本的 vue-cli (1.x 或 2.x),你需要先通過 npm uninstall vue-cli -g進行卸載。

Node 版本要求

Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。

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

cnpm install -g @vue/cli

檢驗是否安裝成功,獲取到版本號即為安裝成功

vue -V

 

創建一個基於webpack模板的新項目

vue create hello-world

接下來就是選擇要安裝的特性,根據實際需求自定義選擇

 

 

 選擇完成后回車就可以開心的掛機了。


 

以下是舊版本vue-cli的安裝方法:

1. 安裝vue-cli腳手架構建工具

cnpm install --global vue-cli

檢驗是否安裝成功,獲取到版本號即為安裝成功。

vue -V

2. 創建一個基於webpack模板的新項目

  要創建項目,首先我們要選定目錄,然后再命令行中把目錄轉到選定的目錄。然后執行

vue init webpack my-project

  這樣就會生成一個初始化的vue項目,或使用

vue init webpack-simple my-project

  生成一個一個簡單的項目,目錄結構比上一種方式簡單許多。

  運行初始化命令的時候會讓用戶輸入幾個基本的選項,如項目名稱,描述,作者等信息,如果不想填直接回車默認就好。

  需要注意的是項目的名稱不能大寫,不然會報錯。

Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代碼? (Y [ yes ] / N [ no ])

  ESLint 是js語法檢查工具,使用的話會嚴格要求js書寫格式,對代碼規范化有着一定的好處,如果閑麻煩也可以不開。

至此項目已經構建好了,那么如何把項目運行起來呢?

首先需要進入到我們項目的文件夾,也就是cd到我們項目目錄,然后執行

cnpm install

  如果創建項目的時候沒有報錯,這一步可以省略。如果報錯了  cd到項目里面運行

cnpm install

  執行這一步的目的就是安裝項目的依賴,這時會將package.json文件中配置的依賴全部安裝一遍。

最后運行

npm run dev

這樣我們的項目就運行起來了。訪問地址:http://localhost:8080

 


免責聲明!

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



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