目錄結(jié)構(gòu)
以下文件均為npm create helloworld自動生成的文件目錄結(jié)構(gòu)
目錄截圖
目錄說明
| 目錄/文件 | 說明 |
|---|---|
| node_modules | npm 加載的項目依賴模塊 |
| src | 這里是我們要開發(fā)的目錄，基本上要做的事情都在這個目錄里 |
| assets | 放置一些圖片，如logo等。 |
| components | vue組件文件的存放目錄,也是主要的工作目錄 |
| App.vue | 項目入口文件，我們也可以直接將組件寫這里，而不使用 components 目錄。 |
| main.js | 項目的核心文件。 |
| index.html | 首頁入口文件，你可以添加一些 meta 信息或統(tǒng)計代碼啥的。 |
| package.json | 項目配置文件。 |
| README.md | 項目的說明文檔，markdown 格式 |
文件說明
index.html:啟動頁面
<div id="app">為后續(xù)的vue文件提供可替換的殼標簽
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
main.js:入口文件，類似于java的main方法
功能有兩個：
1、導入vue框架；
2、將App.vue的內(nèi)容掛載(替換)到index.html的<div id="app"/>標簽
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
App.vue：第一個vue文件
<!--
一、Vue的文件結(jié)構(gòu)為三段式
1.template負責頁面元素搭建
2.script負責js代碼
3.style負責css樣式
二、使用其他的vue組件分兩步
1.導入：
1.1在js方法中import組件
1.2在export default中使用components注冊組件
2.使用：
在template中使用組件標簽
-->
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/> <!-- 在template中使用組件標簽 -->
</template>
<script>
import HelloWorld from './components/HelloWorld.vue' // 在js方法中import組件
export default {
name: 'App',
components: {
HelloWorld // 在export default中使用components注冊組件
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
HelloWorld.vue: 展示頁面
msg是定義好的參數(shù)，外部組件(App.vue)可以通過參數(shù)傳遞的方式，將數(shù)據(jù)傳給HelloWorld.vue文章來源：http://www.zghlxwxcb.cn/news/detail-674057.html
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
?文章來源地址http://www.zghlxwxcb.cn/news/detail-674057.html
到了這里，關(guān)于Vue3.0極速入門- 目錄和文件說明的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
