用vue－router和webpack搭建路由项目

一、用vue－cli构建初始项目

• step1：全局安装vue-cli

$ npm install --global vue-cli

• step2: 创建一个基于webpack模版的新项目

vue init webpack my-vueRouter-project1

• step3：创建项目过程中，根据提示填写项目名称，是否使用ESLint检查项目等功能，具体填写结果如下：
  

• step4： 安装依赖文件

// 进入到刚刚创建的项目目录：
cd my-vueRouter-project1
//安装package.json中的项目依赖
npm install

二、项目目录下各个文件的含义和作用

以上操作自动构建的项目目录如下

一级目录

• build文件夹和config文件夹都是和webpack配置相关

  

• node_modules文件夹：npm install 安装的依赖代码库

• src文件夹：存放项目源码，我们开发的所有代码都会放在这个目录下

  

• static文件夹：存放第三方静态资源，如reset.css等，这个文件夹中默认包含了.gitkeep文件，这个文件表示即使这个目录为空也可以把这个目录提交到代码仓库里

  

• .babelrc文件： 我们使用的是es6，通常我们通过babel将es6编译成es5浏览器才能识别，这个.babelrc文件就是babel编译的一些配置。
  “presets”: 表示预设，表示babel转换预先需要安装的一些插件
  “plugins”: 除了一些预设插件，这里也可以配置一些插件

  

• editorconfig : 编译器的相关配置, charset表示编码；indet_style表示缩进风格；indet_size表示缩进大小为2格；end_of_line表示换行符的风格；insert_final_newline = true表示新创建一个文件时会在文件末尾添加一个新行；trim_trailing_whitespace = true自动移除行尾多余空格；

• eslintignore：忽略eslint语法检查的目录文件，下面表示bulid和config目录下，忽略语法检查

  

• .eslintrc.js: eslint的配置文件。
  extends: ‘standard’表示继承一个标准javascript的规则，这些与语法规则可以在上面注释的那个网站查看
  https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  除了继承标准规则，也可以对具体的一些规则作修改，在rules中对具体的规则进行修改，值为0值，表示忽略这些规则的检查；

  

• gitignore: git提交时忽略这些文件和目录，不会提交上去

  

• index.html： 入口html 文件，这个文件很简单，没有引入各种css，js文件，因为在webpack项目编译过程中，会自动将这些css，js文件插入进来；

• package.json： 整个项目的配置文件，用来描述一个项目的基本信息和依赖关系；”script”: 表示定义命令行的一些命令，比如 “dev”: “node build/dev-server.js”,表示在命令行输入npm run dev的时候执行了node build/dev-server.js这个命令；
  dependencies: 表示生产环境下的一些依赖；devDependencies表示编译过程中的一些依赖，这些依赖在打包后上线运行时是不存在的；

  

• readme：项目的一些描述文件；

编写vue组件

• App.vue

<template>
   <div id="tab">
   <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
     <router-link to="/home">Home</router-link>
     <router-link to="/about">About</router-link>
     <router-link to="/album">Album</router-link>
    <!-- 路由匹配的组件将渲染到这里 -->
     <router-view></router-view>
    </div>
</template>
<script>  
</script>
<style>
   a{text-decoration: none;font-size: 20px}
</style>

• about.vue

<template>
  <h1>I am a about</h1>
</template>

<script>
  export default{}//把整个模块输出
</script>
<style>

</style>

• album.vue

<template>
  <h1>I am a Album</h1>
</template>

<script>
    export default{}
</script>

<style>

</style>

• home.vue

<template>
  <h1>I am a Home</h1>
</template>

<script>
   export default{}
</script>

<style>

</style>

编写webpack编译的入口文件main.js

import Vue from 'vue'
import App from './App.vue'
import about from './components/about.vue'
import home from './components/home.vue'
import album from './components/album.vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)//加载路由，vue在使用插件时候，需要用Vue.use()方法加载插件；
const routes = [{//定义路由路径、路由组件等参数配置
  path: '/about', component: about
}, {
  path: '/home', component: home
}, {
  path: '/album', component: album
}]
//创建router实例，传入路由配置
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})
// 创建和挂载根实例,并注入路由，让整个项目都有路由功能
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

安装路由，并运行项目

npm install vue-router --save-dev
npm run dev

进入8080端口，初始页面

点击Alum，跳转到/aubum页面