自己新建vue文件怎么访问路径是什么 • Worktile社区

worktile

Worktile官方账号

为了访问自己新建的Vue文件，你需要按照以下步骤操作：

在Vue项目的根目录下，找到src文件夹，这是存放源代码的主要目录。
在src文件夹下新建一个文件夹来存放你的Vue文件，比如命名为views。
在views文件夹下新建一个Vue文件，比如命名为MyComponent.vue。
在MyComponent.vue文件中编写你的Vue组件。
打开项目的入口文件main.js，该文件通常在src目录下。在这个文件中，你需要导入你的Vue文件并在Vue实例中注册它。

import Vue from 'vue';
import MyComponent from './views/MyComponent.vue';

// 注册你的Vue组件
Vue.component('my-component', MyComponent);

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

在你希望使用Vue组件的页面上，可以直接使用该组件的标签来调用。

<template>
  <div>
    <!-- 使用你的Vue组件 -->
    <my-component></my-component>
  </div>
</template>

<script>
export default {
  name: 'YourComponent',
  // 你的其他代码...
}
</script>

通过以上步骤，你已经成功新建了自己的Vue文件，并可以在其他页面中访问它。在浏览器中打开你的应用程序，可以根据页面的路由来访问你的Vue组件。

例如，如果你的应用程序的路由配置为/about，那么你可以通过访问http://localhost:8080/about来查看你的Vue组件。请注意，具体的访问路径可能会根据你的项目配置而有所不同。

希望以上内容能对你有所帮助！如有问题请随时提问。

2年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

在Vue项目中，自己创建一个.vue文件后，访问路径可以通过Vue Router进行配置。

下面是具体的步骤：

在Vue项目根目录下，找到src文件夹，然后在该文件夹下新建一个名为"views"的文件夹。这个文件夹用来存放我们自己创建的.vue文件。
在"views"文件夹中创建一个.vue文件，例如"home.vue"。这个文件就是我们自己创建的组件。
在项目根目录下找到src文件夹里的"router"文件夹，然后在"router"文件夹中找到"index.js"文件。
在"index.js"文件中，找到routes数组，这个数组存放着我们的路由配置。
在routes数组中添加一个新的路由配置，指定路径和对应的组件。例如：
```
import Home from '../views/home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]
```
这段代码中，我们指定了根路径'/'对应的组件是"home.vue"。
保存"index.js"文件。

现在你可以在浏览器中访问根路径'/'，就能看到我们自己创建的组件了。

需要注意的是，如果你在菜单中添加了其他的路由链接，比如'/about'，则需要在routes数组中添加对应的路由配置，指定路径和组件。

除了上述步骤之外，还有其他方法来访问自己创建的.vue文件。

如果在src文件夹里创建一个名为"components"的文件夹，可以将自己创建的.vue文件放在这个文件夹里。
在需要使用这个组件的.vue文件中，通过import语句引入组件，然后在components属性中注册组件。例如：
```
import Home from "@/components/home.vue";

export default {
  components: {
    Home
  }
}
```
在需要使用这个组件的地方使用组件标签，即可在页面中引入这个组件。例如：
```
<template>
  <div>
    <Home/>
  </div>
</template>
```

通过上述步骤，在Vue项目中就能访问到自己创建的.vue文件了。记得在路由配置中定义对应的路径和组件，或者在需要使用组件的地方进行引入和注册。

2年前 0条评论

fiy

Worktile&PingCode市场小伙伴

访问Vue文件的路径取决于你在项目中的配置和组织方式。下面是一种常见的方法来自新建Vue文件的路径和访问方式。

新建Vue文件：
- 在你的项目中，找到你自己认为合适的位置（如src目录），创建一个新的Vue文件夹。
- 在Vue文件夹下创建一个新的文件，命名为你想要的组件名（如MyComponent.vue）。
- 在文件中，编写Vue组件的代码，包括模板、样式和逻辑。
配置路径：
- 在Vue项目的根目录下，找到vue.config.js文件（如果没有则需要新建一个）。
- 在文件中，添加一个pages选项，用于配置你的页面。
- 在pages对象中，添加一个新的属性，属性名为你想要设置的路径名（如'mycomponent'），属性值为之前新建的Vue文件的路径（如'src/components/MyComponent.vue'）。
```
// vue.config.js
module.exports = {
  pages: {
    mycomponent: {
      entry: 'src/components/MyComponent.vue',
      template: 'public/index.html',
      filename: 'mycomponent.html'
    }
  }
}
```
访问路径：
- 保存并关闭vue.config.js文件。
- 运行你的Vue项目，可以使用npm run serve命令。
- 打开浏览器，并输入http://localhost:8080/mycomponent.html，其中8080为你项目运行的端口号，mycomponent.html为之前设置的路径名加上.html后缀。
- 如果一切顺利，你应该能够访问你的Vue组件页面。

注意事项：

你可以在vue.config.js文件中配置多个页面，每个页面都可以有自己的路径。
如果你使用Vue CLI 3来创建项目，那么以上的vue.config.js配置将不适用。在Vue CLI 3中，你可以使用路由（Vue Router）来访问不同的页面和组件。

2年前 0条评论