這幾天整理了一下vue的幾種使用方式,對比以後發現有不少類似之處,那麼是否是能夠混合使用呢?好比這樣:css
這種結合會怎麼樣?咱們來看看具體狀況。html
心急的能夠先看看在線演示:https://naturefwvue.github.io/nf-vue-cnd/cnd/project/vue
目錄結構徹底按照cli(腳手架)創建的項目的文件夾來設定,只是把.vue文件改爲了.js文件。
如圖:
react
好吧,這裏用src不太準確,由於這些都是能夠直接在瀏覽器裏面運行的代碼。webpack
沒有.vue文件,而是用.js文件取代,由於原生js不支持.vue文件,看官網說明,彷佛須要Babel + webpack才能支持,而這兩個我又都不會。因此暫時不用.vue文件了。git
這個index.html是從vite裏面拷貝出來的,用vite創建項目的時候,還覺得不須要webpack了呢,後來發現本身太天真了,不過這個頁面卻是能夠拿來用用。github
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="public/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>一種怪異的方式</title> <script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"></script> <script src="https://unpkg.com/vue-router@4.0.3/dist/vue-router.global.js"></script> <script src="https://unpkg.com/vuex@4.0.0-rc.2/dist/vuex.global.js"></script> <link rel="stylesheet" href="https://unpkg.com/element-plus@1.0.2-beta.30/lib/theme-chalk/index.css"> <script src="https://unpkg.com/element-plus@1.0.2-beta.30/lib/index.full.js"></script> </head> <body> <div> 這是一個嘗試... </div> <div id="app"> <div id="nav"> <p> <router-link :to="{name:'Home'}">首頁</router-link> <router-link :to="{name:'state'}">查看狀態管理</router-link> <router-link :to="{name:'component'}">查看組件加載</router-link> </p> <router-view></router-view> </div> <hr> vuex狀態演示<br> $store - count:{{$store.state.count}}<br> <el-button type="primary" @click="setCount">vuex的 計數</el-button><br> <hr> <script type="module" src="src/main.js?v=9"></script> </body> </html>
全家桶
這個用傳統的script來引入,沒嘗試import的方式。web
路由導航
正常設置就能夠。vue-router
import 方式引用 js代碼
使用下面的方式。vuex
<script type="module" src="src/main.js?v=2"></script>
type 要寫 "module",不然會報錯。
後面加v=2,目的是爲了能夠更新緩存。
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只支持常量,不支持變量,想把版本號作個參數,都作不了。
const App = { setup() { // 傳說中的setup const store = Vuex.useStore() // 狀態的控制事件 const setCount = () =>{ store.commit('setCount') } return { // 返回給模板,不然模板訪問不到。 setCount } } } export default App
簡單的狀態的演示,其餘的各類方法也都是能夠用,不寫那麼多了。
離模板有點遠,因此寫的時候容易蒙,因此要把功能分散到其餘頁面(組件)裏面,這裏主要是一個入口功能。
const testManage = () => { const hello = Vue.ref('你好,世界') const clickMe = () => { hello.value = '好的,收到' + new Date().valueOf() } return { hello, clickMe } } // vue3的對象 const home = { template: ` <h2>這是home</h2> <div> 我是{{value.name}}。<br> 老規矩:{{hello}}<br> <input type="button" value="快點我" @click="clickMe"/><br><br> 本項目採用「混合」模式開發,<br> vue全家桶和UI庫用script標籤加載。<br> 代碼用import方式加載。<br> 目錄結構參考了cli創建的項目。<br> 支持組件、路由、狀態管理等功能。<br> 狀態計數:{{$store.state.count}} </div> `, setup() { // 使用外面的定義,分解setup內部的代碼 const { hello, clickMe } = testManage() const value = Vue.reactive({ name: 'jyk' }) return { value, hello, clickMe } } } export default home
這麼寫模板,真的很麻煩,編輯器一點忙都不給幫,累死寶寶了。
這裏區別就有點大了,首先模板只能用 template 的方式來寫,
另外不能直接寫css,若是仍是想寫的話,目前想到的方法只能用vue的那種了。
// 引入組件 import test from '../component/test.js?v=7' const demo = { template: ` <h2>這是組件演示</h2> <test str="傳入的參數"></test> `, components: { test }, setup() { return { } } } export default demo
仍是能夠用import的方式加載組件,只是不能直接加.vue的文件,而是要變成.js的文件。
const test = { template: ` 這是 組件測試<br> 參數:{{str1}}<br> `, model: { prop: ['str'] }, props: { str: String }, setup(props) { // 在setup裏面獲取參數值 const str1 = Vue.ref(props.str) return { str1 } } } export default test
其實吧,vue裏面都是組件,只是,其實沒啥本質區別,只有使用方式的不一樣。這裏只是寫了一下屬性的獲取和顯示。另外就是爲了讓另外一個組件來加載。
// 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看的很清楚)。
因此第一次點導航的時候會有一點點卡的感受,固然這和網站的速度有關。
固然再次點導航的時候,就不會重複下載了。
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創建了一個項目,簡單的嘗試了一下,雖然用 也是用 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/project