先查看vue-cli版本:npm install -g @vue/cli
安裝更新:npm install -g @vue/cli
搭建項目
1、創建新的項目
vue create hello-world // vue create + 項目名稱
2、會提示選擇一個preset(預設)
如果沒有配置保存過,則只有以下兩個選項:
① default(babel,eslint):
默認設置(直接enter)非常適合快速創建一個新項目的原型,沒有帶任何輔助功能的 npm包
② Manually select features:
手動配置(按方向鍵 ↓)是我們所需要的面向生產的項目,提供可選功能的 npm 包
我選擇的手動配置
3、手動配置項
我的選擇項是Babel、Router、Vuex三項(此爲常用的)
4、然後會提示你選擇對應功能的具體工具包,選擇自己擅長或者使用廣泛的(方便遇到問題時百度),簡介如下:
① 是否使用history router:n
5、是否保存本次配置(之後可以直接使用)
? Save this as a preset for future projects? (y/N) // y:記錄本次配置,然後需要你起個名; n:不記錄本次配置
6、 如何存放配置 :
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
In dedicated config files // 獨立文件放置
In package.json // 放package.json裏
搭建完成後依次執行 :
cd hello-world // 進入到 hello-world文件夾內
npm run serve // 啓動項目
然後就可以訪問默認的demo頁面了