開啟專案，依次分析下目錄結構，專案目錄結構如下
專案目錄結構如下
目完成後，我們看到src 目錄下有乙個componets 目錄，裡面有乙個 helloworld.vue 檔案（單檔案元件），內容如下
（1）template模板—作用：定義展示模板資訊
（2）script 標籤—作用：匯出元件模組
script中都是js **，它定義這個元件中所需要的資料和及其操作
在.vue檔案中，export default 後面的物件 就相當於 new vue() 建構函式中的接受的物件，包含元件資料（data）, 方法methods等。
這時可以看到，export default 後面的物件和new vue() 建構函式中接受的物件是一模一樣的。但要注意data 的書寫方式不同。在 .vue 元件中data 必須是乙個函式，且需要將資料物件return出來，供元件實現。
（3）style樣式表—作用：定義元件模板樣式
style主要是定義這個元件的樣式，scoped（作用域）表明這裡寫的css 樣式只適用於該元件，可以限定css樣式的作用域。
元件匯出
export是es6的語法，後面的變數可以作為出口傳出，在另外的檔案裡通過 import 接受這個變數並使用，default匯出的方式不需要知道變數的名字， 相當於是匿名的， 直接把開發的介面給export
在元件模組中，只能使用export default向外暴露一次
元件匯出—name屬性
元件匯出時可以加name屬性（可選），不加name屬性或者為空時預設為元件檔名（大駝峰格式）
元件模組的匯入讀取可以通過兩種方式：
元件匯入步驟（1）export default匯出
（2）import … from …匯入
（3）components元件選項命名引入
（4）template模板通過標籤引用
注意事項：template模板中必須有乙個跟檔案
vue 單檔案元件
vue.js自定義的一種檔案格式 vue檔案，稱為單檔案元件，就是將html css js封裝在同乙個檔案內，從而實現了對乙個元件的封裝，乙個.vue 檔案就是乙個單獨的元件。1 編寫單檔案元件 vue結尾的檔案 由3部分組成 html template css style js script ht...
vue單檔案元件
vue單檔案元件 vue單檔案元件就是把乙個頁面拆分成為多個 多層次的元件。通過多層引用，大大縮小vue檔案的長度和頁面複雜度。步驟 父元件 1.引入元件 import tabcard from components tabcard.vue 2.配置元件 export default 3.使用元件 ...
單檔案元件vue
定義 乙個檔案名字是以.vue結尾，並且裡邊的內容就是乙個元件，這個檔案就稱作單檔案元件 普通元件的缺點 普通元件內容是 和 其它js 邏輯摻雜在一塊兒，不易維護，其優勢不容易發揮！x 乙個元件就是乙個vue例項的體現，template div容器部分 script vue例項部分 style 給d...