Vue--Vue-CLI創建項目

本文轉載自查看原文 2020-01-11 14:28 1267 Vue

前戲

在之前我們使用webpack進行打包的時候，webpack.config.js配置都是我們自己手寫的。而Vue-CLI是官方提供的，用來搭建項目腳手架的工具，它是vue.js開發的標准工具，它已經集成了webpack，內置好了很多常用配置，使得我們在使用vue開發項目時更加的標准化。

官方文檔：https://cli.vuejs.org/zh/

安裝

Vue-CLI需要node.js 8.9以上的版本

全局安裝 Vue-CLI

npm install -g @vue/cli

安裝成功后，在命令行可以使用 vue 命令，比如查看當前安裝的版本：

vue --version
# 或者 大寫V
vue -V

如果執行上面后，命令行提示 'vue' 不是內部或外部命令

解決方法：配置環境變量

1. 查看全局安裝目錄 nmp root -g
2. 在我的電腦進入全局安裝目錄下，找到 vue.cmd
3. 右鍵計算機，屬性—》高級系統設置—》環境變量，將 vue.cmd 所在的路徑加入環境變量，點擊“確定”

使用Vue-CLI創建項目

運行 vue create 命令來創建一個新項目，在哪個目錄下執行就會生成在哪個目錄下

vue create 項目名稱

執行后會讓你選擇，第一個是默認項目，第二個是自定義項目

創建默認項目

會提示選擇默認（ default ）還是手動（ Manually ）,默認的配置非常適合快速創建一個新項目的原型，而手動設置則提供了更多的選項。

這里選擇 default ，時間可能比較久，等等就過去了（如有提示等待，一直回車執行下去就行）。

安裝完最后有兩個命令

執行這兩個命令

執行完訪問上面的地址，如果你能看到如下頁面則啟動項目成功

自定義創建項目

在 E:\vue\npm-demo 目錄下打開命令行窗口，輸入以下命令進行新建項目，項目名是 vue-cli-demo2

vue create vue-cli-demo2

選擇 Manually select features 手動選擇自定義配置進行創建項目

如下圖，根據項目需求, 選擇哪些配置選項

注意：按空格鍵是選中或取消， a 鍵是全選，i是反選

/*
Bable, （常用，必選）解決兼容性問題,支持 ES6 的代碼轉譯成瀏覽器能識別的代碼
TypeScript, 是一種給 JavaScript 添加特性的語言擴展,增加了很多功能,微軟開發的
Progressive Web App (PWA) Support, 漸進式的Web應用程序支持
Router, （常用）是 vue-router 路由。
Vuex, 是Vue.js應用程序的狀態管理模式+庫 （常用）。
CSS Pre-processors, （常用）支持 CSS 預處理器, Sass/Less預處理器。
Linter / Formatter, （常用）支持代碼風格檢查和格式化。如果不想檢查代碼規范，就不選了，建議不選
Unit Testing, 支持單元測試。
E2E Testing, 支持 E2E 測試。
*/

選擇后按回車鍵, 會提示: 是否使用 history 模式的路由, 按回車即可

history 模式可去掉地址欄中的 # ，但需要服務端同步配置重定向