vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(三)

推荐我的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


//content.vue

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

安装VueRouter2

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

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

执行效果如图:

vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(三)_第1张图片

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

vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(三)_第2张图片

我们查阅文档或者看官网的截图,会知道,命令是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

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






就只是一个单纯的路由入口页面。比较特殊的是,下面我 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进行安装。

注意:(我踩的坑)


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

vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(三)_第3张图片

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淘宝镜像,如图:

vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(三)_第4张图片

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

vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(三)_第5张图片

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

cnpm install node-sass -D

这样就完美解决了

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

vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(三)_第6张图片

怎么解决呢?因为windows上的npm是我们下载下来的node自带的,所以在升级的时候,你在你的node的安装目录下按住shift+右键,选择在此处打开命令窗口,然后 npm update npm,等一会儿就行了。如图:
vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(三)_第7张图片

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

vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(三)_第8张图片

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

小结

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

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

你可能感兴趣的:(vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(三))