Vue-CLI 2是Vue.js官方提供的一款命令行工具,用于快速創建基于Vue.js的項目。使用Vue-CLI 2可以大大提高開發效率,讓開發人員快速創建一個完整的Vue.js項目框架,而無需手動配置webpack、babel等開發工具。本文將詳細介紹Vue-CLI 2的安裝、使用以及常用的命令和配置。
一、安裝Vue-CLI 2
npm install -g vue-cli@2
安裝完成后,可以在命令行中輸入vue命令查看Vue-CLI 2是否安裝成功。
vue -V
二、創建Vue.js項目
在命令行中輸入下面的命令,可以創建一個Vue.js項目。其中project-name為項目名稱。
vue init webpack project-name
在執行該命令時,會要求輸入一些項目基本信息,如項目名稱、項目描述、作者等信息。輸入完畢后,會自動安裝webpack、babel等工具。
三、運行和打包Vue.js項目
在當前命令行中進入創建好的項目文件夾中,使用以下命令運行Vue.js項目。
npm run dev
執行該命令后,會啟動一個本地服務器,并在瀏覽器中打開項目首頁。
當項目開發完成后,可以使用以下命令打包項目,在項目文件夾根目錄下生成dist文件夾。
npm run build
四、常用的命令和配置
1、修改webpack配置
在創建的項目中,Vue-CLI 2默認提供了一份webpack配置文件。如果需要修改webpack配置,可以找到項目根目錄下的build文件夾,在該文件夾中找到webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js三個文件,分別對應了項目的基礎配置、開發環境配置和生產環境配置。
2、使用ESLint進行代碼檢查
Vue-CLI 2默認使用了ESLint進行代碼檢查。如果需要修改代碼檢查規則,可以找到項目根目錄下的.eslintrc.js文件,修改文件中的配置即可。
3、安裝和使用插件
使用Vue-CLI 2創建的項目,可以輕松地安裝和使用其他Vue.js插件。例如,如果需要使用Vue Router,可以在項目根目錄下輸入以下命令。
npm install vue-router --save-dev
安裝完成后,在項目中使用Vue Router即可。