iT邦幫忙

1

vue的export default 還是沒能理解它是什麼

  • 分享至 

  • xImage

一、例如在card.vue這個元件 它的export default為何就是空的? 它不是要輸出給app.vue使用嗎?
無法顯示

而在app.vue這邊 它import Card元件這沒問題 但是為何export default這邊不能刪除?
我刪除專案就無法執行
我沒有要它輸出到別的地方啊...
無法顯示

二、請問這三者是什麼關係?
1.<.card/.>

2.import Card from './components/Card'

  1. export default {
    components: {
    Card
    }
    }

三、目前是學到這邊,new vue一個區域性元件或是vue.component全域性元件
https://codepen.io/ofcourse448/pen/WNbMXEw

自學vue兩週的新手向各位大哥請益

(另外這個圖片插入 請問要如何使用?...

驚嘆號![.]左括弧herf刮括弧 我在herf放網址 但左邊框框寫什麼都不行啊XD

已有佛心網友解答:

![alt]左右括弧中間放連結沒錯但後面要加.png之類的副檔名才會顯示圖片 (url.png)

)

看更多先前的討論...收起先前的討論...
dragonH iT邦超人 5 級 ‧ 2020-01-08 11:04:44 檢舉
![alt](url)
還要加.png
樓上兩位佛心大哥好常出現阿都不用上班的嗎...好像在盯哨阿哈哈哈
dragonH iT邦超人 5 級 ‧ 2020-01-08 11:13:01 檢舉
建議你不要把 cdn 跟 cli 的寫法尬在一起

你會混淆自己
這樣我每天都要發問給兩位大哥止飢
cdn那個是我寫在普通html網頁練習用耶 cli專案沒有放cdn?
cli 都是用 import Vue from 'vue'
你可以先看一下 main.js
dragonH iT邦超人 5 級 ‧ 2020-01-08 11:21:35 檢舉
我指的是兩種寫法觀念會不太一樣

如果你不會搞混

那當然沒問題囉
@dragonH
請問cdn寫法跟cli專案寫法是哪裡不一樣呢? cdn寫法是因為按照課本練習的

課本電子檔在這邊
https://reurl.cc/ObN8Oy
首樓留言區竟然不能使用it邦網站給的插入連結功能!
@listennn08
我在研究一下
dragonH iT邦超人 5 級 ‧ 2020-01-08 11:45:03 檢舉
>請問cdn寫法跟cli專案寫法是哪裡不一樣呢?



你不是寫過了嗎XD

整個都很不一樣吧
froce iT邦大師 1 級 ‧ 2020-01-08 13:01:42 檢舉
其實我覺得vue應該一開始就去學cli...
CDN引入實際上真的很少用到
dragonH iT邦超人 5 級 ‧ 2020-01-08 13:08:15 檢舉
真的xd

我唯一會寫 cdn 的

就是在這 demo 的時候
@force但是大哥 課本一開始介紹是說vue是漸進式框架,開發人員可以逐步的、階段性的加進所需要的功能,所以課本才引用cdn教一些基本的功能?

還是我誤會了XD
https://imgur.com/eOZUtKE

我好像不能再留言了今天次數超過
froce iT邦大師 1 級 ‧ 2020-01-08 18:49:38 檢舉
用了CDN引入就不能用cli了,整個的結構差太多,通常CDN引入就是demo或是很小的專案某部分用來代替JQuery用。
這部分應該跟他漸進性框架沒啥關係。

教學都先教cdn引用,是因為得先扯到一堆前置知識,像是component、webpack、npm(yarn)、polyfills、ES 6 module...
但是我是覺得VUE夠簡單,真的有個簡單範例的CLI專案,如果你有程式基礎的話,搞懂進入點,看著看著就能學會了。

然後你的這個問題,建議看這篇:
https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part4/module_system.html

應該說要學VUE,那就順便好好學一下ES 6吧。
marlin12 iT邦研究生 5 級 ‧ 2020-01-08 18:56:21 檢舉
cdn的開發環境,只可以用作初步學習。真正要發揮vue的功能,還要在cli架構內。而且在cli架構內,還有很多很重要的插件(例如:router、nuxt、vuex、i18n)。
用cdn來學習vue,好處是簡單、易上手,壞處是沒有弄清楚vue的基礎概念(例如:instance lifecycle、component、data & event binding),便可以開始動手,最後做出一些錯漏百出的東西來。
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
listennn08
iT邦高手 5 級 ‧ 2020-01-08 12:04:58
最佳解答

export default descript

Card.vue

export defalut {
    // 這裡代表你沒有輸出 js
}


App.vue

import Card from './components/Card.vue' // 這邊你已經引用 Card.vue 了
export default { // App.vue 是掛載在 main.js 下
    components: {
        Card, // 因為 html 有 <card /> 你要輸出 components 給 main.js 知道那是組件
    }
}


main.js (新版的 vue cli 可能會長的不一樣)

import Vue from 'vue'
import App from './App.vue' // App.vue 在這
new Vue({
    el: '#app',
    components: { 
      App 
    },
    template: '<App/>'
})
// 或
// new Vue({
//   render: h => h(App),
// }).$mount('#app')

大哥午安 要記得吃午餐
import Vue from 'vue' 請問這句是引用該目錄下的vue檔案嗎? 但是我沒看到

import Vue from 'vue' 是引用 node_modules 裡的檔案 所以沒有路徑

明白了 先謝謝了 但我還會有問題再持續請教

我要發表回答

立即登入回答