vue项目创建后没有build_听说vue项目不用build也能用?-优快云博客

本文介绍了Vue项目创建后如何进行路由配置。组件结构主要在index.js中定义，通过自定义标记构建UI。Vue Router在多视图应用程序中运行良好，允许通过标准方式链接和定义视图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

。

组件代码的结构如下:

const template = `

...

`export default { template, data () { }, computed: { }, // etc.}

主要的应用程序组件在 index.js 文件中。它的任务是为所有组件分配定制的 HTML 标记，比如 < app-header > 或 < app-footer > 。

import Header from './header/header.js'import Content from './content/content.js'import Footer from './footer/footer.js'const App = {  el: 'main',  components: {    'app-header': Header,    'app-content': Content,    'app-footer': Footer
  }
}window.addEventListener('load', () => {  new Vue(App)
})

然后使用这些自定义标记在 index. html 文件中构建应用程序 UI。我们最终得到了一个简单易懂的用户界面:

span style="line-height: 26px;">html><html><head>
  <meta charset="utf-8">
  <title>Minimalistic Vue JStitle>
  <link rel="stylesheet" href="index.css">
  <link rel="stylesheet" href="header/header.css">
  <link rel="stylesheet" href="content/content.css">
  <link rel="stylesheet" href="footer/footer.css">
  <script src="https://unpkg.com/vue">
  script>
  <script src="index.js" type="module">
  script>head><body>
  <main>
    <app-header bg-color="#c5cae2">
    app-header>
    <app-content>
    app-content>
    <app-footer>
      (c) Tomasz Waraksa, Dublin, Ireland    app-footer>
  main>body>html>

路由选择

一个不那么琐碎的应用程序通常会有一大堆视图，用户可以导航到这些视图。事实证明，Vue 路由器在我们的设置中工作，没有任何问题。您可以像定义任何其他组件一样定义视图或页面，使用上面描述的相同方法。然后，不要将这些组件注册为自定义标记，而是用标准的方式将它们链接到路由，例如:

import Home from './home/home.js'import About from './about/about.js'export default [
  {    name: 'home',    path: '/',    component: Home
  },
  {    name: 'about',    path: '/about',    component: About
  }
]

然后获取 Vue Router 库并在 index. html 中添加路由器占位符: