vue的專案架構須知
這次帶給大家vue的專案架構須知，vue專案結構須知的注意事項有哪些，以下就是實戰案例，一起來看一下。
新建一個專案之後，我們來看看專案的目錄結構
#
幾個主要文件的內容
index.html檔案（入口檔案，系統進入後先進入index.html）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>blog</title> </head> <body> <p id="app"></p> <!-- built files will be auto injected --> </body> </html>
main.js檔案（導入對應的模組）
improt Vue from 'vue' //可以将脚手架中下载的模块拿出来，可以直接使用new来实例化vue对象
improt App from './App'
Vue.config.productionTip = false
new Vue({
el:'#app', //当前的vue要控制的容器是谁，要获取的这个容器元素是谁，#app是index.thml里的id=“app”
template:'<App/>', //模板，可以写对应的p，也可以写组件调用的标签，只要有一个根标签即可
components:{ App } //想要调用组件，必须在component里注册这个组件，这里的APP来源于引入的./App文件，即：App.vue文件
})App.vue檔案（根元件）
<!--1模板：html结构 -->
<template>
<p id="app">
<img src="./assets/logo.png">
<!--路由入口，对应进入router下面的index.js文件-->
<router-view/>
</p>
</template>
<!--2行为：处理逻辑 -->
<script>
export default {
name: 'App'
}
</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>router資料夾下面的index.js檔案（前端路由）
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld' //导入模板文件
Vue.use(Router)
export default new Router({
routes: [ //定义对应模板的路径，url对应进入的模板
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})模板：
template可以用它去包含一些內容，它本身並不會真正的渲染到dom裡面去，可以直接使用template標籤包括起來，注意：template裡有且只能有一個根標籤。行為：
透過import來跟別的元件進行關聯，然後透過 export default {
name: 'App',
components: {
HelloWorld
}樣式：
跟普通css樣式一樣。可以使用sass語法，但要在專案中安裝sass，安裝成功之後可以在package.json裡面看到對應的資訊專案載入過程
#
專案開始：index.html ----> main.js ----> App.vue
以上是vue的專案架構須知的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
AI攻克費馬大定理？數學家放棄5年職業生涯，將100頁證明變代碼
Apr 09, 2024 pm 03:20 PM
費馬大定理，即將被AI攻克？而整件事最有意義的地方在於，AI即將解決的費馬大定理，正是為了證明AI無用。曾經，數學屬於純粹的人類智力王國；如今，這片疆土正被先進的演算法所破解，所踐踏。圖片費馬大定理，是一個「臭名昭著」的謎題，在幾個世紀以來，一直困擾著數學家。它在1993年被證明，而現在，數學家們有一個偉大計畫：用電腦把證明過程重現。他們希望在這個版本的證明中，如果有任何邏輯上的錯誤，都可以由電腦檢查出來。專案網址：https://github.com/riccardobrasca/flt
分享PyCharm專案打包的簡易方法
Dec 30, 2023 am 09:34 AM
簡單易懂的PyCharm專案打包方法分享隨著Python的流行，越來越多的開發者使用PyCharm作為Python開發的主要工具。 PyCharm是功能強大的整合開發環境，它提供了許多方便的功能來幫助我們提高開發效率。其中一個重要的功能就是專案的打包。本文將介紹如何在PyCharm中簡單易懂地打包項目，並提供具體的程式碼範例。為什麼要打包專案？在Python開發
PyCharm實用技巧：將項目轉換為可執行EXE文件
Feb 23, 2024 am 09:33 AM
PyCharm是一款功能強大的Python整合開發環境，提供了豐富的開發工具和環境配置，讓開發者更有效率地編寫和除錯程式碼。在使用PyCharm進行Python專案開發的過程中，有時候我們需要將專案打包成可執行的EXE文件，以便在沒有安裝Python環境的電腦上執行。本文將介紹如何使用PyCharm將專案轉換為可執行的EXE文件，同時給出具體的程式碼範例。首
深入了解PyCharm：快速刪除項目的方法
Feb 26, 2024 pm 04:21 PM
標題：深入了解PyCharm：刪除專案的高效方式近年來，Python作為一種強大而靈活的程式語言，受到越來越多開發者的青睞。在Python專案的開發中，選擇一個高效的整合開發環境至關重要。 PyCharm作為一款功能強大的整合開發環境，為Python開發者提供了許多便利的功能和工具，其中包括快速、有效率地刪除專案目錄。以下將著重介紹如何使用PyCharm中的刪除
製作 iPhone 上 iOS 17 提醒應用程式中的購物清單的方法
Sep 21, 2023 pm 06:41 PM
如何在iOS17中的iPhone上製作GroceryList在「提醒事項」應用程式中建立GroceryList非常簡單。你只需添加一個列表，然後用你的項目填充它。該應用程式會自動將您的商品分類，您甚至可以與您的伴侶或扁平夥伴合作，列出您需要從商店購買的東西。以下是執行此操作的完整步驟：步驟1：開啟iCloud提醒事項聽起來很奇怪，蘋果表示您需要啟用來自iCloud的提醒才能在iOS17上建立GroceryList。以下是它的步驟：前往iPhone上的「設定」應用，然後點擊[您的姓名]。接下來，選擇i
基於開源的 ChatGPT Web UI 項目，快速建立屬於自己的 ChatGPT 站點
Apr 15, 2023 pm 07:43 PM
身為科技部落客，了不起比較喜歡各種折騰，之前給大家介紹過ChatGPT接入微信，釘釘和知識星球（如果沒看過的可以翻翻前面的文章），最近再看開源專案的時候，發現了一個ChatGPTWebUI專案。想著剛好之前沒有將ChatGPT接入WebUI，有了這個開源專案可以拿來使用，真是不錯，下面是實操的安裝步驟，分享給大家。安裝官方在Github的專案文件上提供了很多中的安裝方式，包括手動安裝，docker部署，以及遠端部署等方法，了不起在選擇部署方式的時候，一開始為了簡單想著
基礎教學：使用IDEA建立Maven項目
Feb 19, 2024 pm 04:43 PM
IDEA（IntelliJIDEA）是一款強大的整合開發環境，可協助開發人員快速且有效率地開發各種Java應用程式。在Java專案開發中，使用Maven作為專案管理工具能夠幫助我們更好地管理依賴函式庫、建置專案等。本文將詳細介紹如何在IDEA中建立一個Maven專案的基本步驟，同時提供具體的程式碼範例。步驟一：開啟IDEA並建立新專案開啟IntelliJIDEA
react啟動專案報錯怎麼辦
Dec 27, 2022 am 10:36 AM
react啟動專案報錯的解決方法：1、進入專案資料夾，啟動專案並查看報錯資訊；2、執行「npm install」或「npm install react-scripts」指令；3、執行「npm install @ant-design/ pro-field --save」指令。
