Vue2+VueRouter2+webpack 构建项目实战（三）配置路由，整俩页面（下）

报错问题解决;

关闭格式检查插件eslint

这里一请搜索 eslint 然后把对应的不一下，我的是windows的，与下面的不同。

如上，我们再次运行 npm run dev 跑起来，结果发现命令行里面错误一片。。。很多人在这里就都晕了。。。没关系，其中大部分错误都是格式造成的，并不是很重要的错误，但是这样的提示很不爽。因此，我们把检查错误插件eslint给关闭掉。

打开根目录下面的/build/webpack.base.conf.js文件，找到如下代码：

preLoaders: [
  {
    test: /\.vue$/,
    loader: 'eslint',
    include: projectRoot,
    exclude: /node_modules/
  },
  {
    test: /\.js$/,
    loader: 'eslint',
    include: projectRoot,
    exclude: /node_modules/
  }
],
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

全部注释掉，如下

// preLoaders: [
//   {
//     test: /\.vue$/,
//     loader: 'eslint',
//     include: projectRoot,
//     exclude: /node_modules/
//   },
//   {
//     test: /\.js$/,
//     loader: 'eslint',
//     include: projectRoot,
//     exclude: /node_modules/
//   }
// ],
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

回头，调整格式的时候可以再打开。先关掉，解决核心错误，再来考虑这些格式错误。

安装sass-loader以及node-sass插件

然后我们再跑，这回错误肯定少多了，但是还是有错误。如果你上面是严格按照我的代码来的，这里应该会提示缺少sass-loader组件错误。

没关系，缺什么，就安装什么，我们输入 npm install sass-loader -D进行安装。

如上图所示，就安装好了。

安装好了再跑，这回又提示我们缺少node-sass插件。折磨疯了吧？没关系，缺啥，安啥。

输入命令npm install node-sass -D进行安装。

安装结果不截图，然后，我们运行npm run dev，如果不出意外的话，应该能够顺利的跑起来了。

我们在地址栏后面输入http://localhost:9000/#/content应该就能访问到我们配置的内容页面的模板了，如下图所示：

小结

好，通过本章的学习，我们已经顺利的安装好路由，并简单的配置了两个页面，并且顺利的跑起来了。

可能是我写的代码不太标准，因此在跑起来的时候不能通过校验，必须把校验关闭掉才能跑起来。如果你知道我的代码有什么问题，欢迎留言给我，让我修复我的问题。

通过本章学习，我们需要掌握如下技能：

1. 简单配置main.js文件。
2. 简单安装组件，以及相应的配置。
3. 遇到错误提示的时候，不要着急，一步一步排查，最终解决问题。

我的博文和官方文档最大的差别就是，我是一步一步走，并不是简单给你几个命令就好了。在这过程中，我们要学会排查问题，解决问题。要多看官方文档。

本文由FungLeo原创，允许转载，但转载必须附带首发链接。如果你不带链接，我将采取包括但不限于深深的鄙视你等手段！

首发地址：http://blog.csdn.net/fungleo/article/details/53199436