Vuejs2 VueJS:组件未渲染

我正在学习我的第一个Vue教程，有点卡住了。我有一个App.vue文件，我可以看到浏览器检查器扩展正在加载，一个router index.js文件和登录/注册表单。我可以看到默认的Hello组件

我应该能够转到/login和/signup，但是组件没有加载。没有控制台错误。从哪里开始故障排除

App.Vue：

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

<script>
export default {
  name: 'app'
}
</script>

<style>
  body {
    background-color: #f7f7f7;
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .is-danger {
    color: #9f3a38;
  }
</style>

SignUpForm.vue：

<template>
  <div class="ui stackable three column centered grid container">
    <div class="column">
      <h2 class="ui dividing header">Sign Up, it's free!</h2>

      <Notification
        :message="notification.message"
        :type="notification.type"
        v-if="notification.message"
      />

      <form class="ui form" @submit.prevent="signup">
        <div class="field" :class="{ error: errors.has('name') }">
          <label>Full Name</label>
          <input type="text" name="name" v-model="name" v-validate="'required'" placeholder="Full name">
          <span v-show="errors.has('name')" class="is-danger">{{ errors.first('name') }}</span>
        </div>

        <div class="field" :class="{ error: errors.has('username') }">
          <label>Username</label>
          <input type="text" name="username" :class="{'input': true, 'is-danger': errors.has('username') }" v-model="username" v-validate="'required'" placeholder="Username">
          <span v-show="errors.has('username')" class="is-danger">{{ errors.first('username') }}</span>
        </div>

        <div class="field" :class="{ error: errors.has('email') }">
          <label>Email</label>
          <input type="email" name="email" :class="{'input': true, 'is-danger': errors.has('email') }" v-model="email" v-validate="'required|email'" placeholder="Email">
          <span v-show="errors.has('email')" class="is-danger">{{ errors.first('email') }}</span>
        </div>

        <div class="field" :class="{ error: errors.has('password') }">
          <label>Password</label>
          <input type="password" name="password" :class="{'input': true, 'is-danger': errors.has('password') }" v-model="password" v-validate="'required'" placeholder="Password">
          <span v-show="errors.has('password')" class="is-danger">{{ errors.first('password') }}</span>
        </div>

        <button class="fluid ui primary button" :disabled="!isFormValid">SIGN UP</button>

        <div class="ui hidden divider"></div>
      </form>

      <div class="ui divider"></div>

      <div class="ui column grid">
        <div class="center aligned column">
          <p>
            Got an account? <router-link to="/login">Log In</router-link>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Notification from '@/components/Notification'

export default {
  name: 'SignUpForm',
  components: {
    Notification
  },
  data () {
    return {
      name: '',
      username: '',
      email: '',
      password: '',
      notification: {
        message: '',
        type: ''
      }
    }
  },
  computed: {
    isFormValid () {
      return Object.keys(this.fields).every(key => this.fields[key].valid)
    }
  },
  beforeRouteEnter (to, from, next) {
    const token = localStorage.getItem('tweetr-token')

    return token ? next('/') : next()
  },
  methods: {
    signup () {
      axios// eslint-disable-line no-use-before-define
        .post('/signup', {
          name: this.name,
          username: this.username,
          email: this.email,
          password: this.password
        })
        .then(response => {
          // save token in localstorage
          localStorage.setItem('tweetr-token', response.data.data.token)

          // redirect to user home
          this.$router.push('/')
        })
        .catch(error => {
          // display error notification
          this.notification = Object.assign({}, this.notification, {
            message: error.response.data.message,
            type: error.response.data.status
          })
        })
    }
  }
}
</script>

注册吧，这是免费的！
全名
{{errors.first（'name'）}
用户名
{{errors.first（'username'）}
电子邮件
{{errors.first（'email'）}
密码
{{errors.first（'password'）}
注册

有账户吗？登录

从“@/components/Notification”导入通知
导出默认值{
名称：'SignUpForm'，
组成部分：{
通知
},
数据（）{
返回{
名称：“”，
用户名：“”，
电子邮件：“”，
密码：“”，
通知:{
消息：“”，
类型：“”
}
}
},
计算：{
isFormValid（）{
返回Object.keys（this.fields）.every（key=>this.fields[key].valid）
}
},
路由前（到、从、下一个）{
const-token=localStorage.getItem（'tweer-token'）
返回令牌？下一个（'/'）：下一个（）
},
方法：{
注册（）{
axios//eslint在定义前禁用行无使用
.post（“/signup”{
姓名：this.name，
用户名：this.username，
电子邮件：this.email，
密码：这个是密码
})
。然后（响应=>{
//将令牌保存在本地存储中
localStorage.setItem（'tweer-token'，response.data.data.token）
//重定向到用户主页
这是。$router.push（“/”）
})
.catch（错误=>{
//显示错误通知
this.notification=Object.assign（{}，this.notification{
消息：error.response.data.message，
类型：error.response.data.status
})
})
}
}
}

我的main.js文件：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import VeeValidate from 'vee-validate'

window.axios = axios
axios.defaults.baseURL = 'http://127.0.0.1:3333'

Vue.config.productionTip = false
Vue.use(VeeValidate)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

//要使用“import”命令加载的Vue生成版本
//（仅限运行时或单机版）已在webpack.base.conf中使用别名设置。
从“Vue”导入Vue
从“./App”导入应用程序
从“./路由器”导入路由器
从“axios”导入axios
从“vee validate”导入vee validate
window.axios=axios
axios.defaults.baseURL='0http://127.0.0.1:3333'
Vue.config.productionTip=false
Vue.use（VeeValidate）
/*eslint禁用无新*/
新Vue({
el:“#应用程序”，
路由器，
组件：{App}，
模板：“”
})

您的主Vue实例需要将自身装载到

#app

元素：

new Vue({
    router
}).$mount('#app');

下面是vue路由器的一个基本示例

在

main.js

中尝试一些其他东西：

// render function
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

// component
new Vue({
  el: '#app',
  router,
  App
})

---

您的主Vue实例需要将自身装载到

#app

元素：

new Vue({
    router
}).$mount('#app');

下面是vue路由器的一个基本示例

在

main.js

中尝试一些其他东西：

// render function
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

// component
new Vue({
  el: '#app',
  router,
  App
})

---

我的错误是路由器配置。这是不允许我不经许可就走正确的路线。我需要向新的路由器对象添加mode:“history”

正确的路由器配置：

export default new Router({
  mode: 'history',
  routes: [
    blahblahblah
  ]
})

---

我的错误是路由器配置。这是不允许我不经许可就走正确的路线。我需要向新的路由器对象添加mode:“history”

正确的路由器配置：

export default new Router({
  mode: 'history',
  routes: [
    blahblahblah
  ]
})

---

可以发布main.js文件（或Vue实例化的文件）吗。我相信它在Vue实例化（

new Vue（{el:'#app'，router，template:'）中缺少路由器的使用。这正是我的main.js文件的样子。请参见上文。你能发布main.js文件（或Vue实例化的文件）吗？我相信它在Vue实例化（
new Vue）中缺少路由器的使用({el:'#app'，router，template:'。注意。这正是我的main.js文件的样子。请参见上文。用其他几个建议更新了答案。您使用的是
vue
lib的哪个版本？esm，运行时，通用？我使用的是esm版本。有趣的是，Hello World组件确实呈现。您添加了
resolve.alias吗@
“@/components/Auth/SignUpForm”
可能需要一个用于
Auth
文件夹的导入项。更新了答案，并提供了一些其他建议您使用的
vue
库的哪个版本？esm、运行时、通用？我使用的是esm版本。有趣的是，Hello World组件确实呈现。您是否已在网页包中添加了
resolve.alias
条目，用于以
@
开头的导入？
@/components/Auth/SignUpForm'
文件夹可能需要一个条目。