[工具配置]通过webpack+vue+vueRouter+vuecli的配置文件package.json创建一个新的项目

如果是简单通过package.json来创建一个项目,只需要执行npm install

首先,我们自己得手动创建一个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报错

相关文章

相关标签/搜索