[問題] Vue的學習與使用方式請教

[aa12783509 (沒了重心)]

各位前輩好 目前在Vue的學習上面遇到了一些問題 想向各位請教

目前因為工作上的需求 使用了Vue 也自學了Vue

現在遇到一個問題是 目前公司的專案

是利用一般網頁的寫法在製作的 而不是透過template模板的方式

在前端html的部分利用Vue來處理 例如： v-model v-bind......

下方的js部分 是使用這類的方式製作

https://imgur.com/a/MO8GE2C

透過API送到C#的ApiController去使用


因為我都是自己自學而成的 可能很多觀念都建立的不夠熟悉

所以公司要求我們再看個幾本書籍

但公司裡面有的書籍內容都是使用Vue-cli的教學方式 webpack的打包方式

建立出來的範例檔案 都是類似這樣的

https://imgur.com/a/2oX6FwV

這樣的專案方式 看的非常的吃力 也非常的不熟悉 完全是不同寫法


我想要詢問說 外面的公司 在Vue的使用方式是上者較多還是下者

那有沒有比較推薦類似上者用法的書本或者是線上課程

有沒有什麼知識 或者是什麼功能 是好用的 是必備需要會的 (上者)

假設未來會有想換公司的想法 有沒有什麼是需要補足的(如果只單純會上者的話)


不確定這樣的表達方式是否清楚 在這邊與各位請教

在這邊感謝各位分享與解答了 謝謝各位的幫忙

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 218.173.153.155 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1603067112.A.AAE.html
→ ssccg: 個人經驗是new Vue這種通常是現有專案再導入Vue.js，或是網
→ ssccg: 頁上只有一部分要用Vue做。整個用Vue的新專案就會用vue-cli
了解了 明白!! 那這樣有可能是因為公司的現有專案

在html的部分 想要導入Vue的用法 所以直接用new Vue的做法去做就好了~~~

那我想問一下 其他外面的公司 有提到如果是有使用Vue此技能的公司

大部分 都是使用上者還是下者多呀????
※ 編輯: aa12783509 (61.221.174.36 臺灣), 10/19/2020 09:38:20
→ ssccg: 不過兩者在view的部分都一樣啊? 只差在template放在哪而已
→ ssccg: 沒另外寫就是拿el的html當template而已
不好意思 有點對於你上面這兩句話不太懂 想問一下有什麼範例 可以舉例嗎?
※ 編輯: aa12783509 (61.221.174.36 臺灣), 10/19/2020 09:42:37
→ ssccg: https://i.imgur.com/HRrytmL.png
→ ssccg: https://i.imgur.com/AixOzUY.png
→ ssccg: vue-cli就只是用webpack組裝起來，架構是一樣的，我是覺得
→ ssccg: 沒有分到只會一種
→ ssccg: 你覺得不一樣的其實是node.js生態系的東西，不是Vue的部分
依照你這兩張圖片來看 看起來是很相似的

可能真的只是單純寫法不同 讓我視覺上看起來是兩種不同的東西

我這邊比較了解的 是第一張圖這樣

實際工作上面 可能連template的部分也很少有用到

就是直接使用原生的html標籤

搭配new Vue來綁定一些資料或者是function的部分

不過Vue-cli他的檔案關聯的部分 有點混亂就是了QQ

所以第二張圖是指node.js生態的東西嗎?

這邊順帶想問一下 她明明外層有一個index.html

但是我看他裡面沒有掛其他的js檔案 為什麼他會是直接吃main.js的檔案?
※ 編輯: aa12783509 (61.221.174.36 臺灣), 10/19/2020 14:27:00
→ oToToT: 我之前也一直搞不懂，上次寫了一遍Nuxt就感覺比較懂了XD
這個好像之前有看過Nuxt好像也是從Vue變來的樣子!!??

→ ssccg: 因為webpack/vue-cli會用main.js當進入點，將所有用到的.js
→ ssccg: .vue打包起來，然後在index.html中插入script連結
→ ssccg: 沒打包前這些原始檔用瀏覽器開是沒東西的
→ ssccg: 而index2.html這種是可以直接在瀏覽器開的普通html+js
→ ssccg: node.js生態是指這種模組化的專案結構和用到的工具
你這樣一講 至少可以知道原因了!!!

我有操做到 去做build的時候 他打包出來就是一個index的頁面而已

跟CSS以及javascript的檔案(印象中 如果沒記錯的話)

那這樣的話 外面一般的公司 會有人用new Vue的做法做嗎?

還是通常做專案 都是要用後者的方式呢!!?
※ 編輯: aa12783509 (61.221.174.36 臺灣), 10/19/2020 16:04:01
推 sylviami: 就我所知一般要求前端框架技術的公司大多是後者，如此才
→ sylviami: 會真正達成前後端分離的目的
OK 了解了 謝謝您的 回答~~~

那我想問一下 這樣的話 在後者的使用上 有沒有什麼部分是需要知道的

因為我怕我是自學 知道的東西很片面 不是很完整的QQ

想找時間補足!!!!
※ 編輯: aa12783509 (61.221.174.36 臺灣), 10/20/2020 16:07:42
推 shter: 我公司就是兩種都有，舊專案為了效能把 jQuery 改 Vue
→ shter: 就會使用 new Vue 把原本的 template 塞進 Vue 跑
→ shter: 兩種都有在用，即使是新專案有些規模不大的也不會打包
→ shter: 還很多直接 cdn 引入 Vue Vue-router Vuex 的
→ shter: 兩者只是進入點不同而已，功能是一樣的，沒啥差別
了解了!!! 目前我自己的規劃是 有找到一本書

裡面的寫法與內容 是使用new Vue的方式再做範例的!!!

目前先想把這本書看完 至少學到的東西想使用在公司的專案上

也比較好上手!!! 比較清楚該如何去做

然後再看公司提供的書 是用Vue-cli的做法去做的!!!

→ ssccg: 功能略有差別，只是不一定會用到，像.vue可以用scoped css
※ 編輯: aa12783509 (61.221.174.36 臺灣), 10/23/2020 13:44:20
推 hermes018: 看官網的教學就可以學的很好了