详解从零搭建 vue2 vue-router2 webpack3 工程(2)

日期：2020-05-11 栏目：程序人生浏览：次

在 main.js 中添加测试代码。

// main.js

document.write('来自main.js的问候！')

执行下面的命令来安装模块并启动服务器。

// 安装依赖

npm install

 

// 运行

npm run dev

启动后浏览器会自动打开http://localhost:8080，如果控制台没有报错，页面正确显示 main.js 和 index.html 的内容，改动 main.js 后浏览器不刷新能看到效果，则表示配置没问题。

Vue

新建页面

在 views 目录下新建 index.vue。

<template>

  <div>

    这是{{page}}页面

  </div>

</template>

<script>

export default {

  data: function () {

    return {

      page: 'index'

    }

  }

}

</script>

webpack 1 需要特定的 loader 来转换 ES 2015 import/export，webpack 2 起可以开箱即用。但是 ES6 的新语法还是需要 loader 来转换，在没有配置前，先不要用新语法。用了也没报错（比如 let，const等），那是因为你的浏览器已经支持了 ES6 语法（新版本浏览器都已经支持）。

配置路由

将 vue-router 实例化传入的参数new VueRouter(参数)提取到 router.js 形成路由配置文件。

import index from './views/index.vue'

export default {

  routes: [

    {

      path: '/index',

      component: index

    }

  ]

}

从 vue-loader@13.0.0，不能用 require 来引入 .vue 文件，因为 .vue 文件最终会被编译成 ES6 module。

首页

首页引入 ouput 配置的 JS，添加 Vue 实例的挂载目标。

<body>

<div id="app"></div>

<script src="/static/build.js"></script>

</body>

入口JS完成路由配置、初始化 Vue 实例。

import Vue from 'vue';

import VueRouter from 'vue-router';

import App from './app.vue';

import routerConfig from './router';

Vue.use(VueRouter);

var router = new VueRouter(routerConfig)

new Vue({

  el: '#app',

  router: router,

  render: h => h(App)

});

从 Vue 2.2.0 后使用 require('vue') 会报错，应使用 ES6 module（import），具体原因请参考 Vue 更新说明 https://github.com/vuejs/vue/releases，截图如下：

在首页组件 app.vue 中添加路由链接、路由视图组件。

<template>

  <div>

    <div>

      <router-link to="/index">Home</router-link>

    </div>

    <div>

      <router-view></router-view>

    </div>

  </div>

</template>

转载注明出处：http://www.heiqu.com/700.html

详解从零搭建 vue2 vue-router2 webpack3 工程(2)

相关推荐