vue最简单的入门教程+实战+Vue2+VueRouter2+w

推荐我的vue教程：VUE系列教程目录

通过前两个文章：

1. vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（一）
2. vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（二）
   搭建完项目及项目目录及文件结构后，准备工作就到此结束了，下面，我们要来做页面了

前言

我们利用https://cnodejs.org/api这里公开的api来做项目。这里，我们假设我们的项目是做俩页面，一个列表页面，一个内容页面。列表页面有分页等，内容页面展示。

因此，我们需要两个模板文件。

我们在src/page目录下面新建两个文件，分别是index.vue和content.vue，代码分别是：

//index.vue
<template>
  <div>index</div>
</template>

//content.vue
<template>
  <div>content</div>
</template>

这里，我们只要先把基础的内容写好就是了。我就用两个单词代表我们的页面。

安装VueRouter2

在基本的VUE开发环境中，我们在构建项目时，需要安装VueRouter2到我们的项目。参考文档见VueRouter2安装文档

在我们的项目中打开终端，然后执行npm install vue-router -D命令。

执行效果如图：

另外附上官网的安装教程截图：

我们查阅文档或者看官网的截图，会知道，命令是npm install vue-router，那为什么要加一个-D的参数呢？这个是为了让我们的安装的vue-router这个插件写入到package.json配置文件中。以便于下次再其他地方安装的时候，可以一并安装进去，否则，还得再安装一遍。

配置 main.js

安装好路由后，下面，我们需要在src/main.js文件中进行配置。

整理代码如下：

// 1.引用 vue 没什么要说的
import Vue from 'vue'
// 3.引用路由
import VueRouter from 'vue-router'
// 光引用不成，还得使用
Vue.use(VueRouter)
// 2.入口文件为 src/App.vue 文件 所以要引用
import App from './App.vue'
// 4.引用路由配置文件
import routes from './config/routes'
// 5.引用API文件
import api from './config/api'
// 6.将API方法绑定到全局
Vue.prototype.$api = api
// 使用配置文件规则
const router = new VueRouter({
  routes
})
// 跑起来吧
new Vue({
  router,
  el: '#app',
  render: (h) => h(App)
})

对比上面的配置文件和模板原来的配置，那个好不言而喻，你大可以那这个当作初始项目的默认配置。

配置 App.vue

入口文件肯定和默认的不一样，我的配置文件如下：

<template>
  <div>
    <router-view
      class="view"
      keep-alive
      transition
      transition-mode="out-in">
    </router-view>
  </div>
</template>

<script>
export default {
  components: {}
}
</script>

<style lang="scss">
  @import "./style/style";
</style>

就只是一个单纯的路由入口页面。比较特殊的是，下面我 import了一个scss文件。我喜欢把css独立出来，而不是写在一起，所以我之前在src目录下面建立了一个style的文件，里面放scss文件。

我建议你先跟着我走，回头自己根据自己的习惯调整。

配置 routes.js

下面我们需要配置路由文件，在我构建的目录中找到路由配置文件，如果想不起来可以回顾上一章节的知识。

// 引用模板
import index from '../page/index.vue'
import content from '../page/content.vue'
// 配置路由
export default [
  {
    path: '/',
    component: index
  },
  {
    path: '/content',
    component: content
  },
]

如上，我们引用模板，然后再配置路由，这里，我们没有涉及自路由的内容，我们先这样配置上。然后，我们就可以在终端里面输入npm run dev来看我们做的效果了。

配置运行端口

如果没有跑起来，提示下面的错误，就表明默认的端口8080被占用了。一般不会被占用，但是也有可能被占用。所以，我们这边来学习一下如何配置运行端口。

#端口被占用的提示
Error: listen EADDRINUSE :::8080
    at Object.exports._errnoException (util.js:953:11)
    at exports._exceptionWithHostPort (util.js:976:20)
    at Server._listen2 (net.js:1253:14)
......

打开项目根目录下/config/index.js配置文件，找到

dev: {
  env: require('./dev.env'),
  port: 8080,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {},
  // CSS Sourcemaps off by default because relative paths are "buggy"
  // with this option, according to the CSS-Loader README
  // (https://github.com/webpack/css-loader#sourcemaps)
  // In our experience, they generally work as expected,
  // just be aware of this issue when enabling this option.
  cssSourceMap: false
}

如上，把 port 后面的端口改成其他数字，如9000 即可。

关闭格式检查插件eslint

如上，我们再次运行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/
  }
],

全部注释掉，如下

// preLoaders: [
//   {
//     test: /\.vue$/,
//     loader: 'eslint',
//     include: projectRoot,
//     exclude: /node_modules/
//   },
//   {
//     test: /\.js$/,
//     loader: 'eslint',
//     include: projectRoot,
//     exclude: /node_modules/
//   }
// ],

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

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

这时我们可以npm run dev运行代码了，这回错误肯定少多了，但是还是有错误。如果你上面是严格按照我的代码来的，由于我们使用了sass进行样式开发，这里应该会提示缺少sass-loader组件错误。

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

注意：（我踩的坑）

<style lang="scss">
  @import "./style/style";
</style>

在新项目里会报错，Module not found: Error: Cannot resolve module 'sass-loader' in 你文件的目录，这是因为我们没有安装sass-loader文件模板，你可以使用npm install sass-loader，来进行安装，如果你发现安装失败，如果你的系统是window，报的错误如下的话，那是因为你的npm在4.0以下，你需要对其进行升级。

npm升级到4.0以上成功后，npm install sass-loader，sass-loader就可以安装啦！当然window环境下的小伙伴也不要太高兴，因为你有可能还有错，不然为何我师傅写的很详细我还要重写呢？因为他懒得踩坑直接用了苹果，（鄙视-买不起），然后Module not found: Error: Cannot resolve module 'node-sass' in 你文件的目录，你会想那还不简单npm install node-sass，之后你哭了，失败了，因为被墙了，怎么办呢？（人家也不知道啦！），在别的项目里拷贝node-sass，或者在网上找下载一个呗！这里附上github上node-sass的地址：node-sass,进去点那个下载的绿按钮进行下载，然后把它放入node_modules文件中，就OK啦！要是还有疑问这里去看看：安装不了node-sass。实在不行就全部使用npm淘宝镜像，如图：

在上面的搜索框里搜索你需要的内容，这里我们以node-sass为例，搜到很多条信息，我们找到我们需要的那一个，点进去，如图：

我们可以看到这句话：cnpm install node-sass，它就是淘宝npm镜像的安装方式，在终端运行它，如下：

cnpm install node-sass -D

这样就完美解决了

关于window下npm升级升级失败，如果你成功了可以跳过，一般window下新手学都会出错：
如果你在window下对npm升级输入npm update npm命令，总是会报各种错误，如图：

怎么解决呢？因为windows上的npm是我们下载下来的node自带的，所以在升级的时候，你在你的node的安装目录下按住shift+右键，选择在此处打开命令窗口，然后npm update npm，等一会儿就行了。如图：

到此，我们运行npm run dev，如果不出意外的话，应该能够顺利的跑起来了。

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

小结

好，通过本章的学习，我们已经顺利的安装好路由，并简单的配置了两个页面，并且顺利的跑起来了。解决了我们需要SASS的问题，为了更好的重现我曾经踩过的坑还刻意把所有的环境清掉，进行重现，在安装东西的时候等待是一种折磨，折腾了2个小时才重现成功，希望大家也能理解我的辛苦，好好学习。还要说的是我的博文和官方文档最大的差别就是，我是一步一步走，并不是简单给你几个命令就好了。在这过程中，我们要学会排查问题，解决问题，还要多看官方文档。

提示：在最近几天我会慢慢附上VUE系列教程的其他后续篇幅，后面还有精彩敬请期待，请大家关注我的专题：web前端。如有意见可以进行评论，每一条评论我都会认真对待。