电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

Vue 3.0 全家桶搶先體驗

瀏覽:4日期:2023-01-23 17:14:29

Vue 3.0 全家桶發(fā)布內(nèi)容包括:

vue: Beta vue-router: Alpha vuex: Alpha vue-class-component: Alpha vue-cli: Experimental support via vue-cli-plugin-vue-next eslint-plugin-vue: Alpha vue-test-utils: Alpha vue-devtools: WIP jsx: WIP

可以看到 Vue 3.0 beta 版本是一個項目系列,包含了我們在開發(fā)過程中需要的套件、webpack 插件等等,本文將帶大家快速搭建基于 Vue 3.0 的項目框架,這和之前很多 Vue 3.0 的 Demo 不同,是具備商業(yè)化項目能力的框架,本文將包括以下內(nèi)容:

基于 vue-cli 快速搭建 Vue 3.0 項目 Vue 3.0 基本特性體驗 集成 vue-router 和 vuex 4.0

說個題外話,今天中午我搭建 Vue 3.0 項目時,發(fā)現(xiàn)了 vue-router-next 一個 block 級別的 BUG,想在 vue-router-next 項目 issue 中反饋時,發(fā)現(xiàn)已經(jīng)有人提交了相似問題,隨后晚上測試時,bug 已經(jīng)被 fixed,為 Vue 團隊的高效點贊,issue 地址,所以當(dāng)大家發(fā)現(xiàn)使用中問題時,可以及時到項目 issue 下進行反饋,這是一支可以信賴的團隊!

Vue 3.0 項目初始化

Vue 3.0 項目初始化過程和 Vue 2.0 類似,具體步驟如下:

Vue 項目初始化

第一步,安裝 vue-cli:

npm install -g @vue/cli

注意以下命令是錯誤的!

npm install -g vuenpm install -g vue-cli

安裝成功后,我們即可使用 vue 命令,測試方法:

$ vue -V@vue/cli 4.3.1

第二步,初始化 vue 項目:

vue create vue-next-test

輸入命令后,會出現(xiàn)命令行交互窗口,這里我們選擇 Manually select features:

Vue CLI v4.3.1? Please pick a preset: default (babel, eslint) ❯ Manually select features

隨后我們勾選:Router、Vuex、CSS Pre-processors 和 Linter / Formatter,這些都是開發(fā)商業(yè)級項目必須的:

Vue CLI v4.3.1? Please pick a preset: Manually select features? Check the features needed for your project: ◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◉ Router ◉ Vuex ◉ CSS Pre-processors❯◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing

注意:Vue 3.0 項目目前需要從 Vue 2.0 項目升級而來,所以為了直接升級到 Vue 3.0 全家桶,我們需要在 Vue 項目創(chuàng)建過程中勾選 Router 和 Vuex,所以避免手動寫初始化代碼

回車后會自動安裝依賴,為了加速安裝速度,我們可以使用淘寶源來加快初始化速度:

vue create -r https://registry.npm.taobao.org vue-next-test

項目創(chuàng)建完畢后,目錄結(jié)構(gòu)如下:

.├── README.md├── babel.config.js├── package-lock.json├── package.json├── public│ ├── favicon.ico│ └── index.html└── src ├── App.vue ├── assets │ └── logo.png ├── components │ └── HelloWorld.vue ├── main.js ├── router │ └── index.js ├── store │ └── index.js └── views ├── About.vue └── Home.vue

升級 Vue 3.0 項目

目前創(chuàng)建 Vue 3.0 項目需要通過插件升級的方式來實現(xiàn),vue-cli 還沒有直接支持,我們進入項目目錄,并輸入以下指令:

cd vue-next-testvue add vue-next

執(zhí)行上述指令后,會自動安裝 vue-cli-plugin-vue-next 插件(查看項目代碼),該插件會完成以下操作:

安裝 Vue 3.0 依賴 更新 Vue 3.0 webpack loader 配置,使其能夠支持 .vue 文件構(gòu)建(這點非常重要) 創(chuàng)建 Vue 3.0 的模板代碼 自動將代碼中的 Vue Router 和 Vuex 升級到 4.0 版本,如果未安裝則不會升級 自動生成 Vue Router 和 Vuex 模板代碼

完成上述操作后,項目正式升級到 Vue 3.0,注意該插件還能支持 typescript,用 typescript 的同學(xué)還得再等等。

Vue 3.0 基本特性體驗

下面我們從項目開發(fā)的角度逐步體驗 Vue 3.0 的開發(fā)流程

創(chuàng)建路由

項目開發(fā)中,我們通常需要創(chuàng)建新頁面,然后添加路由配置,我們在 /src/views 目錄下創(chuàng)建 Test.vue:

<template> <div class='test'> <h1>test page</h1> </div></template><script> export default { }</script><style lang='less' scoped>.test { color: red;}</style>

之后在 /src/router/index.js 中創(chuàng)建路由配置:

import { createRouter, createWebHashHistory } from ’vue-router’import Home from ’../views/Home.vue’const routes = [ { path: ’/’, name: ’Home’, component: Home }, { path: ’/about’, name: ’About’, component: () => import(/* webpackChunkName: 'about' */ ’../views/About.vue’) }, { path: ’/test’, name: ’Test’, component: () => import(/* webpackChunkName: 'test' */ ’../views/Test.vue’) }]const router = createRouter({ history: createWebHashHistory(), routes})export default router

初始化 Vue Router 的過程與 3.0 版本變化不大,只是之前采用構(gòu)造函數(shù)的方式,這里改為使用 createRouter 來創(chuàng)建 Vue Router 實例,配置的方法基本一致,配置完成后我們還需要在 App.vue 中增加鏈接到 Test.vue 的路由:

<template> <div id='app'> <div id='nav'> <router-link to='/'>Home</router-link> | <router-link to='/about'>About</router-link> | <router-link to='/test'>Test</router-link> </div> <router-view/> </div></template>

啟動項目:

npm run serve

在瀏覽器中訪問項目地址,此時已經(jīng)可以跳轉(zhuǎn)到 Test 頁面:

Vue 3.0 全家桶搶先體驗

狀態(tài)和事件綁定

Vue 3.0 中定義狀態(tài)的方法改為類似 React Hooks 的方法,下面我們在 Test.vue 中定義一個狀態(tài) count:

<template> <div class='test'> <h1>test count: {{count}}</h1> </div></template><script> import { ref } from ’vue’ export default { setup () { const count = ref(0) return { count } } }</script>

Vue 3.0 中初始化狀態(tài)通過 setup 方法,定義狀態(tài)需要調(diào)用 ref 方法。接下來我們定義一個事件,用來更新 count 狀態(tài):

<template> <div class='test'> <h1>test count: {{count}}</h1> <button @click='add'>add</button> </div></template><script> import { ref } from ’vue’ export default { setup () { const count = ref(0) const add = () => { count.value++ } return { count, add } } }</script>

這里的 add 方法不再需要定義在 methods 中,但注意更新 count 值的時候不能直接使用 count++,而應(yīng)使用 count.value++,更新代碼后,點擊按鈕,count 的值就會更新了:

Vue 3.0 全家桶搶先體驗

計算屬性和監(jiān)聽器

Vue 3.0 中計算屬性和監(jiān)聽器的實現(xiàn)依賴 computed 和 watch 方法:

<template> <div class='test'> <h1>test count: {{count}}</h1> <div>count * 2 = {{doubleCount}}</div> <button @click='add'>add</button> </div></template><script> import { ref, computed, watch } from ’vue’ export default { setup () { const count = ref(0) const add = () => { count.value++ } watch(() => count.value, val => { console.log(`count is ${val}`) }) const doubleCount = computed(() => count.value * 2) return { count, doubleCount, add } } }</script>

計算屬性 computed 是一個方法,里面需要包含一個回調(diào)函數(shù),當(dāng)我們訪問計算屬性返回結(jié)果時,會自動獲取回調(diào)函數(shù)的值:

const doubleCount = computed(() => count.value * 2)

監(jiān)聽器 watch 同樣是一個方法,它包含 2 個參數(shù),2 個參數(shù)都是 function:

watch(() => count.value, val => { console.log(`count is ${val}`) })

第一個參數(shù)是監(jiān)聽的值,count.value 表示當(dāng) count.value 發(fā)生變化就會觸發(fā)監(jiān)聽器的回調(diào)函數(shù),即第二個參數(shù),第二個參數(shù)可以執(zhí)行監(jiān)聽時候的回調(diào)

獲取路由

Vue 3.0 中通過 getCurrentInstance 方法獲取當(dāng)前組件的實例,然后通過 ctx 屬性獲得當(dāng)前上下文,ctx.$router 是 Vue Router 實例,里面包含了 currentRoute 可以獲取到當(dāng)前的路由信息

<script> import { getCurrentInstance } from ’vue’ export default { setup () { const { ctx } = getCurrentInstance() console.log(ctx.$router.currentRoute.value) } }</script>

Vuex 集成

Vuex 的集成方法如下:

定義 Vuex 狀態(tài)

第一步,修改 src/store/index.js 文件:

import Vuex from ’vuex’export default Vuex.createStore({ state: { test: { a: 1 } }, mutations: { setTestA(state, value) { state.test.a = value } }, actions: { }, modules: { }})

Vuex 的語法和 API 基本沒有改變,我們在 state 中創(chuàng)建了一個 test.a 狀態(tài),在 mutations 中添加了修改 state.test.a 狀態(tài)的方法: setTestA

引用 Vuex 狀態(tài)

第二步,在 Test.vue 中,通過計算屬性使用 Vuex 狀態(tài):

<template> <div class='test'> <h1>test count: {{count}}</h1> <div>count * 2 = {{doubleCount}}</div> <div>state from vuex {{a}}</div> <button @click='add'>add</button> </div></template><script> import { ref, computed, watch, getCurrentInstance } from ’vue’ export default { setup () { const count = ref(0) const add = () => { count.value++ } watch(() => count.value, val => { console.log(`count is ${val}`) }) const doubleCount = computed(() => count.value * 2) const { ctx } = getCurrentInstance() console.log(ctx.$router.currentRoute.value) const a = computed(() => ctx.$store.state.test.a) return { count, doubleCount, add, a } } }</script>

這里我們通過計算屬性來引用 Vuex 中的狀態(tài):

const a = computed(() => ctx.$store.state.test.a)

ctx 是上節(jié)中我們提到的當(dāng)前組件實例

更新 Vuex 狀態(tài)

更新 Vuex 狀態(tài)仍然使用 commit 方法,這點和 Vuex 3.0 版本一致:

<template> <div class='test'> <h1>test count: {{count}}</h1> <div>count * 2 = {{doubleCount}}</div> <div>state from vuex {{a}}</div> <button @click='add'>add</button> <button @click='update'>update a</button> </div></template><script> import { ref, computed, watch, getCurrentInstance } from ’vue’ export default { setup () { const count = ref(0) const add = () => { count.value++ } watch(() => count.value, val => { console.log(`count is ${val}`) }) const doubleCount = computed(() => count.value * 2) const { ctx } = getCurrentInstance() console.log(ctx.$router.currentRoute.value) const a = computed(() => ctx.$store.state.test.a) const update = () => { ctx.$store.commit(’setTestA’, count) } return { count, doubleCount, add, a, update } } }</script>

這里我們點擊 update a 按鈕后,會觸發(fā) update 方法,此時會通過 ctx.$store.commit 調(diào)用 setTestA 方法,將 count 的值覆蓋 state.test.a 的值

總結(jié)

通過我第一時間體驗 Vue 3.0-beta 版本后,感覺 Vue 3.0 已經(jīng)具備了商業(yè)項目開發(fā)的必備條件,語法精煉,不管是代碼可讀性還是運行效率都非常贊。但由于未深入使用,目前還無法提出更多問題,需要在項目實戰(zhàn)中進一步發(fā)現(xiàn)和總結(jié)問題,再和大家分享交流。

到此這篇關(guān)于Vue 3.0 全家桶搶先體驗的文章就介紹到這了,更多相關(guān)Vue 3.0 全家桶內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!

標簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 南京和瑞包装有限公司 | 鑫铭东办公家具一站式定制采购-深圳办公家具厂家直销 | 贵阳用友软件,贵州财务软件,贵阳ERP软件_贵州优智信息技术有限公司 | 蜘蛛车-登高车-高空作业平台-高空作业车-曲臂剪叉式升降机租赁-重庆海克斯公司 | 蒸压釜-陶粒板隔墙板蒸压釜-山东鑫泰鑫智能装备有限公司 | 工业设计,人工智能,体验式3D展示的智能技术交流服务平台-纳金网 J.S.Bach 圣巴赫_高端背景音乐系统_官网 | 中高频感应加热设备|高频淬火设备|超音频感应加热电源|不锈钢管光亮退火机|真空管烤消设备 - 郑州蓝硕工业炉设备有限公司 | 铝机箱_铝外壳加工_铝外壳厂家_CNC散热器加工-惠州市铂源五金制品有限公司 | 深圳希玛林顺潮眼科医院(官网)│深圳眼科医院│医保定点│香港希玛林顺潮眼科中心连锁品牌 | 水稻烘干机,小麦烘干机,大豆烘干机,玉米烘干机,粮食烘干机_巩义市锦华粮食烘干机械制造有限公司 水环真空泵厂家,2bv真空泵,2be真空泵-淄博真空设备厂 | wika威卡压力表-wika压力变送器-德国wika代理-威卡总代-北京博朗宁科技 | 细砂提取机,隔膜板框泥浆污泥压滤机,螺旋洗砂机设备,轮式洗砂机械,机制砂,圆锥颚式反击式破碎机,振动筛,滚筒筛,喂料机- 上海重睿环保设备有限公司 | 小型UV打印机-UV平板打印机-大型uv打印机-UV打印机源头厂家 |松普集团 | jrs高清nba(无插件)直播-jrs直播低调看直播-jrs直播nba-jrs直播 上海地磅秤|电子地上衡|防爆地磅_上海地磅秤厂家–越衡称重 | 杭州网络公司_百度SEO优化-外贸网络推广_抖音小程序开发-杭州乐软科技有限公司 | 神超官网_焊接圆锯片_高速钢锯片_硬质合金锯片_浙江神超锯业制造有限公司 | 5L旋转蒸发器-20L-50L旋转蒸发器-上海越众仪器设备有限公司 | 电动葫芦-河北悍象起重机械有限公司 | 医养体检包_公卫随访箱_慢病随访包_家签随访包_随访一体机-济南易享医疗科技有限公司 | 奥因-光触媒除甲醛公司-除甲醛加盟公司十大品牌 | 非甲烷总烃分析仪|环控百科| 知网论文检测系统入口_论文查重免费查重_中国知网论文查询_学术不端检测系统 | 波纹补偿器_不锈钢波纹补偿器_巩义市润达管道设备制造有限公司 | 翰墨AI智能写作助手官网_人工智能问答在线AI写作免费一键生成 | 呼末二氧化碳|ETCO2模块采样管_气体干燥管_气体过滤器-湖南纳雄医疗器械有限公司 | EFM 022静电场测试仪-套帽式风量计-静电平板监测器-上海民仪电子有限公司 | 珠海冷却塔降噪维修_冷却塔改造报价_凉水塔风机维修厂家- 广东康明节能空调有限公司 | 袋式过滤器,自清洗过滤器,保安过滤器,篮式过滤器,气体过滤器,全自动过滤器,反冲洗过滤器,管道过滤器,无锡驰业环保科技有限公司 | 美甲贴片-指甲贴片-穿戴美甲-假指甲厂家--薇丝黛拉 | 缓蚀除垢剂_循环水阻垢剂_反渗透锅炉阻垢剂_有机硫化物-郑州威大水处理材料有限公司 | 振动传感器,检波器-威海广达勘探仪器有限公司 | 翰墨AI智能写作助手官网_人工智能问答在线AI写作免费一键生成 | 横河变送器-横河压力变送器-EJA变送器-EJA压力变送器-「泉蕴仪表」 | SMN-1/SMN-A ABB抽屉开关柜触头夹紧力检测仪-SMN-B/SMN-C-上海徐吉 | 电动葫芦|防爆钢丝绳电动葫芦|手拉葫芦-保定大力起重葫芦有限公司 | 蒜肠网-动漫,二次元,COSPLAY,漫展以及收藏型模型,手办,玩具的新媒体.(原变形金刚变迷TF圈) | 新型游乐设备,360大摆锤游乐设备「诚信厂家」-山东方鑫游乐设备 新能源汽车电池软连接,铜铝复合膜柔性连接,电力母排-容发智能科技(无锡)有限公司 | 超声骨密度仪-骨密度检测仪-经颅多普勒-tcd仪_南京科进实业有限公司 | 干培两用箱-细菌恒温培养箱-菲斯福仪器 | 大倾角皮带机-皮带输送机-螺旋输送机-矿用皮带输送机价格厂家-河南坤威机械 | 翰香原枣子坊加盟费多少钱-正宗枣核糕配方培训利润高飘香 |