【MAC 上学习 Vue】Day 10. 项目中引入 Vue R

搭建项目

使用 CMD 工具进行搭建。对于 Install vue-router，选 no；对于其他，选 no，或默认。

vue init webpack dm

安装路由

1. 使用 Visual Studio Code 打开 dm 文件夹，并在终端运行：

cnpm install vue-router --save-dev

2. 配置 src/router 文件夹下的 index.js 文件，配置路由信息，添加以下代码：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

3. 配置 src 文件夹下的 main.js 文件，引入路由配置的信息，添加以下代码：

import router from './router'

建立路由模块

配置 src/router 文件夹下的 index.js 文件，建立路由器模块，添加以下代码：

import HelloWorld from '@/components/HelloWorld'

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

启动路由器

1. 配置 src 文件夹下的 main.js 文件，引入 router：

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,//在这里引入
  components: { App },
  template: '<App/>'
})

2. 配置 src 文件夹下的 App.vue 文件，改写 id 为 app 的 div 里面的内容：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

3. 在终端运行：

cnpm install

cnpm run dev

4. 使用浏览器打开如下地址：
   http://localhost:8080/
   1.png