# 突發奇想 這幾天整理了一下vue的幾種使用方式，對比之後發現有很多相似之處，那麼是不是可以混合使用呢？比如這樣： * vue的全家桶和UI庫，採用傳統的方式載入（CND、script）。 * 自己寫的js程式碼，採用ES6的 import 方式載入。 * 目錄結構採用vuecli建立的專案的目錄結構。 * 入口頁面用vite專案的 index.html。 * 不用babel做轉義（因為還不會用）。 * 不用webpack（因為總是報錯，頭痛...）。 這種結合會怎麼樣？我們來看看具體情況。 心急的可以先看看線上演示：https://naturefwvue.github.io/nf-vue-cnd/cnd/project/ # 專案結構 目錄結構完全按照cli（腳手架）建立的專案的資料夾來設定，只是把.vue檔案改成了.js檔案。 如圖：  好吧，這裡用src不太準確，因為這些都是可以直接在瀏覽器裡面執行的程式碼。 # 檔案介紹 沒有.vue檔案，而是用.js檔案取代，因為原生js不支援.vue檔案，看官網說明，似乎需要Babel + webpack才能支援，而這兩個我又都不會。所以暫時不用.vue檔案了。 ## 入口頁面 index.html 這個index.html是從vite裡面拷貝出來的，用vite建立專案的時候，還以為不需要webpack了呢，後來發現自己太天真了，不過這個頁面倒是可以拿來用用。 ~~~html 這是一個嘗試...

首頁    檢視狀態管理    檢視元件載入

---

vuex狀態演示
$store - count：{{$store.state.count}}
vuex的 計數

---

~~~ * 全家桶 這個用傳統的script來引入，沒嘗試import的方式。 * 路由導航 正常設定就可以。 * import 方式引用 js程式碼 使用下面的方式。 ~~~ ~~~ type 要寫 "module"，否則會報錯。 後面加v=2，目的是為了可以更新快取。 ## main.js ~~~js import store from './store/index.js?v=6' import router from './router/index.js?v=8' import App from './app.js?v=6' // 建立vue3的例項 const app = Vue.createApp(App) .use(store) // 掛載vuex .use(router) // 掛載路由 .use(ElementPlus) // 載入ElementPlus .mount('#app') // 掛載Vue的app例項 ~~~ 這個看著是不是很眼熟，和 vuecli 建立的專案基本沒啥區別，您沒看錯，確實可以這麼寫。 至於為啥要加個 v=8 ？還不是因為快取不更新的問題嘛。只是import只支援常量，不支援變數，想把版本號做個引數，都做不了。 ## App.js ~~~js const App = { setup() { // 傳說中的setup const store = Vuex.useStore() // 狀態的控制事件 const setCount = () =>{ store.commit('setCount') } return { // 返回給模板，否則模板訪問不到。 setCount } } } export default App ~~~ * template 沒有設定模板的話，div內容會被保留，否則會被覆蓋。 簡單的狀態的演示，其他的各種方法也都是可以用，不寫那麼多了。 離模板有點遠，所以寫的時候容易蒙，所以要把功能分散到其他頁面（元件）裡面，這裡主要是一個入口功能。 ## home ~~~js const testManage = () => { const hello = Vue.ref('你好，世界') const clickMe = () => { hello.value = '好的，收到' + new Date().valueOf() } return { hello, clickMe } } // vue3的物件 const home = { template: `

這是home

我是{{value.name}}。
老規矩：{{hello}}


本專案採用“混合”模式開發，
vue全家桶和UI庫用script標籤載入。
程式碼用import方式載入。
目錄結構參考了cli建立的專案。
支援元件、路由、狀態管理等功能。
狀態計數：{{$store.state.count}} `, setup() { // 使用外面的定義，分解setup內部的程式碼 const { hello, clickMe } = testManage() const value = Vue.reactive({ name: 'jyk' }) return { value, hello, clickMe } } } export default home ~~~ 這麼寫模板，真的很麻煩，編輯器一點忙都不給幫，累死寶寶了。 這裡區別就有點大了，首先模板只能用 template 的方式來寫， 另外不能直接寫css，如果還是想寫的話，目前想到的方法只能用vue的那種了。 ## 載入元件的方法 ~~~js // 引入元件 import test from '../component/test.js?v=7' const demo = { template: `

這是元件演示

`, components: { test }, setup() { return { } } } export default demo ~~~ 還是可以用import的方式載入元件，只是不能直接加.vue的檔案，而是要變成.js的檔案。 ## 元件 ~~~js const test = { template: ` 這是 元件測試
引數：{{str1}}
`, model: { prop: ['str'] }, props: { str: String }, setup(props) { // 在setup裡面獲取引數值 const str1 = Vue.ref(props.str) return { str1 } } } export default test ~~~ 其實吧，vue裡面都是元件，只是，其實沒啥本質區別，只有使用方式的不同。這裡只是寫了一下屬性的獲取和顯示。另外就是為了讓另一個元件來載入。 ## 路由 ~~~js // import Home from '../views/home.js?v=2' const routes = [ { path: '/', name: 'Home', component: () => import('../views/home.js?v=8') }, { path: '/state', name: 'state', component: () => import('../views/state.js?v=8') }, { path: '/component', name: 'component', component: () => import('../views/component.js?v=8') } ] const router = VueRouter.createRouter({ history: VueRouter.createWebHistory(), routes }) export default router ~~~ 這個程式碼也是很眼熟的，程式碼基本一樣，加上"VueRouter." 就行。 路由可以載入元件，也可以傳遞引數給元件，細節就不寫了。以後可能會詳細介紹。 > **非同步載入：** 現在可以體驗到非同步載入的感覺了。 一開始路由對應的元件並不會被下載，而是在第一次點導航的時候才會開始下載（按F12看的很清楚）。 所以第一次點導航的時候會有一點點卡的感覺，當然這和網站的速度有關。 當然再次點導航的時候，就不會重複下載了。 ## 狀態管理 ~~~js export default Vuex.createStore({ state: { count: 0, myObject: { time: '現在的時間' } }, getters: { getCount: (state) => { return state.count }, getMyObject: (state) => { return Vue.readonly(state.myObject) }, getTime: (state) => { return state.myObject.time } }, mutations: { setCount(state) { state.count++ }, setTime(state) { state.myObject.time = '現在時間：' + new Date() } }, actions: { }, modules: { } }) ~~~ 還是一樣，區別就在於載入方式。 這裡只是一個最簡單的演示，以後會詳細介紹。 # 優缺點 基本功能都實現了，我們來分析一下。 ## 缺點 先說缺點吧。 * 元件的模板部分編寫很麻煩，因為就是一個大字串，各種輔助功能完全用不上，全憑經驗。 * 沒有開發環境，需要自己配置個web服務網站。 * 程式碼改完了，需要按F5重新整理才能更新，而且還有個快取的問題，關掉快取吧，每次重新整理都要花好多時間載入；如果開啟的話，又要想辦法更新。 * 沒有按需載入的功能，vue的全家桶、UI庫，不管用多少功能，統統都要下載。 * js程式碼沒有做處理，各種空格、換行符統統沒有去掉，佔用空間大，不保密，程式碼可以隨便看。 * 擴充套件性未知，其他的第三方是否支援也都不清楚。 * 其他各種缺點。 ## 優點 * 簡單粗暴，不用管那麼多，可以直接開魯程式碼。 * 很方便做線上演示。（其實主要是為了這個目的才折騰的） * 因為沒有打包這個步驟，所以可以部分更新程式碼。 好像也沒啥優點了。 # 和vite的區別 用vite建立了一個專案，簡單的嘗試了一下，雖然用 也是用 import 載入，但是還是需要babel和webpack，當然這也是必須的，否則.vue怎麼處理？這是vue的一大特色，不能扔掉。 # 小結 生命在於不斷的折騰。也許這種折騰根本就沒啥意義。 以前用工程化的方式寫程式碼，總是非常坎坷，因為各種報錯。後來熟悉了，不會報錯了（或者是知道要如何處理），但是感覺對vue的瞭解還是停留在表面，稍微深入一點就不知道了。 於是去啃ES6，嘗試cnd的方式，現在感覺對vue的瞭解更深入了一點點。 不斷學習，不斷折騰，不斷進步嘛。 # 線上演示 https://naturefwvue.github.io/nf-vue-cnd/cnd/project/ # 原始碼 https://github.com/naturefwvue/nf-vue-cnd/tree/main/cnd/