首页  思维导图  详情

Vue CLI 4.x 项目结构介绍

2021-07-14 15:50:40   10  举报





AI智能生成

使用Vue CLI 4.x创建的项目结构

vue

前端开发

vue cli

作者其他创作

大纲/内容

.gitignore

babel.config.js

package.json

package-lock.json

node_modules

vue_router

vue

src

assets

log.png

main.js

import {createApp} from 'vue'

import App from'./App.vue'

App.vue

<template>
<div id="nav">
<router-link to="/">Home</router-link>|
<router-link to="/about">About</router-link>
</div>
<router-view/>
</template>

views

Home.vue

<template>
<div class="home">
<img alt = "Vue logo" src= "../assets/logo.png">
<HelloWorld msg ="Welcome to Your Vue.js App"/>
</div>
</template>

<script>

import HelloWorld from'@/components/HelloWorld.vue'

export default{
name:'Home',
components : {
HelloWorld
}
}
</script>

components

HelloWorld.vue

<template>
<div class="hello">
</template>

<script>
export default{
name : 'HelloWorld',
props : {
msg : String
}
}
</script>

About.vue

<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>

createApp(App).use(router).mount('#app')

import router from './router'

router

index.js

import {createRouter , createWebHashHistory } from 'vue-router'
import Homefrom '../views/Home.vue'

const routes=[
{ path:'/',
name : 'Home',
component : Home},

{ path : '/about',
name : 'About'
component :() =>import(/*webpackChunkName:"about"*/'../views/About.vue')}
]

const router = createRouter ({ history : createWebHashHistory(), routes })

export default router

public

favicon.ico

index.html