怎樣通過已經使用過webpack+vue+vueRouter+vuecli的設定檔package.json建立一個項目

標籤：ref   com   lint   int   ini   令行   目的   https   mod   

首先，我們自己得手動建立一個webpack+vue+vueRouter+vuecli工程，執行下面：
如：
建立一個vue項目,建立一個基於"webpack"的項目,項目名為vuedemo：

$ vue init webpack vuedemo

安裝完成後進入工程名稱再根據原來項目的設定檔初始化

$ cd vuedemo$ npm install

但是由於在建立的時候對eslint的選擇中選擇了Yes,所以後面根據配置package.json的時候，發現沒有eslint-friendly-formatter 模組，由於原來的工程應該沒有配置這個，所以這兒需要安裝下，如下代碼：

npm i -D eslint eslint-friendly-formatter

模組地址：https://www.npmjs.com/package/eslint-friendly-formatter

安裝後執行:npm run dev 發現運行起來的頁面沒有啟動起來，原因是還是這個eslint引起的。

出錯資訊為：

These relative modules were not found：*/build/dev-client in multi ./build/dev-client ./src/main.js，*./src/main.js in multi ./build/dev-client ./src/main.js

原因如下：
webpack.base.conf.js裡面，腳手架本來就有 js的編譯模組：

 {        test: /\.js$/,        loader: ‘babel-loader‘,        include: [resolve(‘src‘), resolve(‘test‘)]      }

我們需要注釋掉這段代碼：

//    {//      test: /\.(js|vue)$/,//      loader: ‘eslint-loader‘,//      enforce: ‘pre‘,//      include: [resolve(‘src‘), resolve(‘test‘)],//      options: {//        formatter: require(‘eslint-friendly-formatter‘)//      }//    },

原因就是導致重複編譯，所以應該就有兩個main.js檔案。所以不要重複出現匹配規則就可以。
然後運行npm run dev可以了。
相似問題：vue-cli安裝完成之後，命令列npm run dev沒有問題，但webstorm報錯

怎樣通過已經使用過webpack+vue+vueRouter+vuecli的設定檔package.json建立一個項目