1. 程式人生 > >怎樣通過已經使用過webpack+vue+vueRouter+vuecli的配置文件package.json創建一個項目

怎樣通過已經使用過webpack+vue+vueRouter+vuecli的配置文件package.json創建一個項目

relative route ued orm outer 手動 include ons sta

首先,我們自己得手動創建一個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創建一個項目