使用vue-cli>=3版本自動生成vue.js+webpack的項目模板

什么是vue-cli

vue-cli是有Vue提供的一個官方cli，專門為單頁面應用快速搭建繁雜的腳手架。它是用於自動生成vue.js+webpack的項目模板，是為現代前端工作流提供了 batteries-included的構建設置。只需要幾分鍾的時間就可以運行起來並帶有熱重載，保存時 lint 校驗，以及生產環境可用的構建版本。

安裝（全局）

注意，vue-cli都更多久都不知道了，不要再用舊版本安裝了，如果看到其它教程還在用舊版本安裝的話直接不用看了。
官網那么棒那么全就別在百度找過期教程了。

舊版本：npm install –g vue-cli
新版本：npm install -g @vue/cli

創建項目

命令：vue create my-project

Vue-cli官網 創建一個項目

由於vue-cli3將webpack的基礎配置全部內嵌了，這就導致我們初始化項目完成之后發現原先的webpack的config配置全部都消失不見了，那該怎么辦呢？別慌，vue-cli3早就考慮到了這一點，它預留了一個vue.config.js的js文件供我們對webpack進行自定義配置。請看下文：

vue-cli3搭建項目之webpack配置

vue CLI >= 3 和舊版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆蓋了。如果你仍然需要使用舊版本的 vue init 功能，你可以全局安裝一個橋接工具：

npm install -g @vue/cli-init
# `vue init` 的運行效果將會跟 `vue-cli@2.x` 相同
vue init webpack my-project

運行項目

執行創建項目命令后會自動安裝所有需要的包，完成后在項目文件夾下運行以下代碼：

npm run serve

項目結構介紹

請看下一篇 vue-cli生成的項目代碼結構介紹