首页  思维导图  详情

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<br>

main.js

import  {createApp} from '<font color="#b71c1c" style=""><b>vue</b></font>'<br>

import  <b><font color="#d32f2f">App</font></b> from'./App.vue'

App.vue

<template><br><span style="font-size: inherit;">      <div id="nav"></span><br><span style="font-size: inherit;">             <router-link to="/">Home</router-link>|</span><br><span style="font-size: inherit;">             <router-link to="/about">About</router-link></span><br><span style="font-size: inherit;">      </div></span><br><span style="font-size: inherit;">      <router-view/></span><br></template><br>

views

Home.vue

<template><br>         <div class="home"><br>                  <img  alt = "Vue  logo"  src=  "../assets/logo.png"><br>                  <HelloWorld  msg ="Welcome to Your Vue.js App"/><br>         </div><br></template><br><br><script><br><br>         import HelloWorld from'@/components/HelloWorld.vue'<br><br>         export default{<br>                   name:'Home',<br>                   components : {<br>                           HelloWorld<br>                    }           <br>         }<br></script><br>

components

HelloWorld.vue

<template><br>          <div  class="hello"><br></template><br><br><script><br>          export  default{<br>                   name : 'HelloWorld',<br>                   props : {<br>                                 msg : String<br>                    }<br>           }<br></script><br>

About.vue

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

createApp(<b><font color="#d32f2f">App</font></b>).use(<b><font color="#d32f2f">router</font></b>).mount('#<b><font color="#b71c1c">app</font></b>')

import  <b><font color="#d32f2f">router</font></b>  from  './router'

router

index.js

import  {createRouter , createWebHashHistory } from '<b><font color="#0000ff">vue-router</font></b>'<br>import  Homefrom '../views/<b><font color="#0000ff">Home.vue</font></b>'

const  routes=[<br>        { path:'/',<br>        name : 'Home',<br>        component : Home},<br><span style="font-size: inherit;">       <br>        { </span><span style="font-size: inherit;">path : '/about',</span><br>         name : 'About'<br>         component :() =>import(/*webpackChunkName:"about"*/'../views/<b><font color="#0000ff">About.vue</font></b>')}<br>]<br>

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

export  default  router

public

favicon.ico

index.html

<div  id="<b><font color="#b71c1c">app</font></b>"></div>