魔天记忘语小说,小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

學(xué)習(xí)Vue3.0，先從搭建環(huán)境開始

Bug源測(cè)試，上線來(lái)幾個(gè)。愿君多修改，今夜眼難合。

創(chuàng)新互聯(lián)是一家專業(yè)提供劍河企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、html5、小程序制作等業(yè)務(wù)。10年已為劍河眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

這是小編關(guān)于Vue3.0系列文章的第二篇，本文將帶您從零搭建一個(gè)基于Vue3.0與vite的Vue3.0開發(fā)環(huán)境，通過(guò)本文的學(xué)習(xí)，你將學(xué)習(xí)到以下內(nèi)容：

使用vite初始化Vue3.0項(xiàng)目
配置ts
配置vue-router
配置vuex
使用Vue3.0開發(fā)一個(gè)TodoList示例

同時(shí)本文的內(nèi)容已錄制為視頻發(fā)布到了B站，可以點(diǎn)擊鏈接跳轉(zhuǎn)到視頻地址，同時(shí)您也可以通過(guò)微信搜索【前端有的玩】關(guān)注我的公眾號(hào)加我微信好友，手摸手和你一起學(xué)習(xí)Vue3.0

使用vite初始化項(xiàng)目

vite 介紹

vite是尤大大在今年新鼓搗出來(lái)的一個(gè)工具，尤大大對(duì)vite的描述是這樣的: Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production. 翻譯成中文就是：Vite 是一個(gè)由原生 ES Module 驅(qū)動(dòng)的 Web 開發(fā)構(gòu)建工具。在開發(fā)環(huán)境下基于瀏覽器原生 ES imports 開發(fā)，在生產(chǎn)環(huán)境下基于 Rollup 打包。

上面這段話提到了一個(gè)關(guān)鍵字ES Module,這個(gè)是什么呢？詳細(xì)的介紹大家可以訪問(wèn) https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules 進(jìn)行查看。此處我們長(zhǎng)話短說(shuō)。在最早的時(shí)候，還沒有前端工程化，然后我們寫javascript都是寫到一個(gè)文件，然后通過(guò)script標(biāo)簽去引用，后來(lái)隨著前端發(fā)展越來(lái)越壯大，js之間依賴越來(lái)越復(fù)雜，這時(shí)候就需要有一種可以將JavaScript 程序拆分為可按需導(dǎo)入的單獨(dú)模塊的機(jī)制來(lái)維護(hù)這個(gè)依賴，隨之就誕生了AMD,CMD等等，而ES Module就是瀏覽器支持的原生模塊依賴的功能。

為什么要用vite

為什么尤大大要推出vite，在我們使用webpack的時(shí)候，每次開發(fā)時(shí)候啟動(dòng)項(xiàng)目都需要幾十秒甚至超過(guò)一分鐘，比較慢，而且熱更新也比較慢，而vite的主要特點(diǎn)就是快，官網(wǎng)對(duì)于vite的特點(diǎn)是這樣描述的

快速的冷啟動(dòng)
即時(shí)的模塊熱更新
真正的按需編譯

到底有多快呢，我們先新建一個(gè)項(xiàng)目試試

初始化vite項(xiàng)目

初始化項(xiàng)目, 在工作空間打開終端窗口，對(duì)于window用戶即cmd，然后執(zhí)行下面命令

 
 
 
 
  
  
  
  yarn create vite-app my-vue3

執(zhí)行之后就會(huì)輸出以下內(nèi)容，可以看到新建項(xiàng)目特別快，僅僅用了1.63s

2. 初始化完項(xiàng)目，通過(guò)cd my-vue3進(jìn)行到項(xiàng)目里面，然后再執(zhí)行yarn安裝依賴（此處建議使用淘寶鏡像，比較快）

3. 依賴安裝完需要通過(guò)yarn dev啟動(dòng)項(xiàng)目

是不是瞬間體驗(yàn)到了秒啟項(xiàng)目的感覺，啟動(dòng)之后就可以通過(guò)http://localhost:3000來(lái)訪問(wèn)項(xiàng)目了

查看項(xiàng)目結(jié)構(gòu)

使用vscode打開項(xiàng)目之后，可以查看到新建的項(xiàng)目結(jié)構(gòu)與vue-cli4創(chuàng)建的項(xiàng)目結(jié)構(gòu)基本一樣，都是我們很熟悉的App.vue和main.js

查看main.js文件內(nèi)容

打開main.js

 
 
 
 
  
  
  
  import { createApp } from 'vue' 
  
  
  
  import App from './App.vue' 
  
  
  
  import './index.css' 
  
  
  
  createApp(App).mount('#app')

發(fā)現(xiàn)創(chuàng)建Vue的方式變了，原來(lái)是通過(guò)new Vue的方法來(lái)初始化Vue，在Vue3.0中，修改為了通過(guò)createApp的方式，關(guān)于Vue3.0的更多使用方式，我們將在后面的系列文章中逐漸為您帶來(lái)講解。

配置typescript

typescript現(xiàn)在已經(jīng)成為了前端必備技能之一，大量的項(xiàng)目也開始基于typescript進(jìn)行開發(fā)。在使用Vue2.0的時(shí)候，因?yàn)閂ue2.0沒有對(duì)typescript進(jìn)行支持，所以使用ts開發(fā)功能顯示有些別扭。但到了Vue3，其自身源碼便是基于ts開發(fā)的，所以對(duì)ts天生有著很好的支持。使用vite配置typescript很簡(jiǎn)單，只需要進(jìn)行以下幾步操作.

安裝 typescript

 
 
 
 
  
  
  
  yarn add typescript -D

2. 初始化tsconfig.json

 
 
 
 
  
  
  
  # 然后在控制臺(tái)執(zhí)行下面命令

npx tsc --init

3. 將main.js修改為main.ts,同時(shí)將index.html里面的引用也修改為main.ts, 通過(guò)還需要修改App.vue與HelloWorld.vue文件，修改方式如下

 
 
 
 
  
  
  
   
  
  
  
       
  
  
  
      import HelloWorld from './components/HelloWorld.vue' 
  
  
  
      export default { 
  
  
  
        name: 'App', 
  
  
  
        components: { 
  
  
  
          HelloWorld 
  
  
  
        } 
  
  
  
      }

修改完之后，重啟就可以訪問(wèn)項(xiàng)目了。雖然這樣配置是可以了，但是打開main.ts會(huì)發(fā)現(xiàn)import App from App.vue會(huì)報(bào)錯(cuò): Cannot find module './App.vue' or its corresponding type declarations.,這是因?yàn)楝F(xiàn)在ts還沒有識(shí)別vue文件，需要進(jìn)行下面的配置:

在項(xiàng)目根目錄添加shim.d.ts文件
添加以下內(nèi)容

 
 
 
 
  
  
  
  declare module "*.vue" { 
  
  
  
           import { Component } from "vue"; 
  
  
  
           const component: Component; 
  
  
  
           export default component; 
  
  
  
         }

接下來(lái)你就可以開開心心的在組件中使用ts了

配置 vue-router

在Vue2.0中我們路由一般會(huì)選擇使用vue-router,在Vue3.0依然可以使用vue-router,不過(guò)和Vue3.0一樣當(dāng)前vue-router的版本也是beta版本，在本文撰寫的時(shí)候，版本是4.0.0-beta7

安裝vue-router

因?yàn)楫?dāng)前vue-router針對(duì)vue3.0的版本還是beta版本，所以不能直接通過(guò)yarn add vue-router進(jìn)行安裝，而是需要帶上版本號(hào)

 
 
 
 
  
  
  
  yarn add [email protected]

配置vue-router

在項(xiàng)目src目錄下面新建router目錄，然后添加index.ts文件，在文件中添加以下內(nèi)容

 
 
 
 
  
  
  
  import {createRouter, createWebHashHistory} from 'vue-router' 
  
  
  
  // 在 Vue-router新版本中，需要使用createRouter來(lái)創(chuàng)建路由 
  
  
  
  export default createRouter({ 
  
  
  
    // 指定路由的模式,此處使用的是hash模式 
  
  
  
    history: createWebHashHistory(), 
  
  
  
    // 路由地址 
  
  
  
    routes: []
  
  
  
   })

與新的Vue3.0初始化方式發(fā)生變化一樣，vue-router的初始化方式也發(fā)生了變化，變成了通過(guò)createRouter來(lái)初始化路由。

將router引入到main.ts中

修改main.ts文件內(nèi)容如下

 
 
 
 
  
  
  
  import { createApp } from 'vue' 
  
  
  
  import App from './App.vue'
  
  
  
  import './index.css' 
  
  
  
  import router from './router/index' 
  
  
  
  const  app = createApp(App) 
  
  
  
  // 通過(guò)use 將 路由插件安裝到 app 中 
  
  
  
  app.use(router) 
  
  
  
  app.mount('#app')

配置 vuex

與vue-router一樣，新的vuex當(dāng)前也處于beta版本，當(dāng)前版本是4.0.0-beta.4

安裝vuex

 
 
 
 
  
  
  
  yarn add [email protected]

配置vuex

在項(xiàng)目src目錄下面新建store目錄，并添加index.ts文件，文件中添加以下內(nèi)容

 
 
 
 
  
  
  
  import { createStore } from 'vuex' 
  
  
  
  interface State { 
  
  
  
    userName: string 
  
  
  
  } 
  
  
  
  export default createStore({ 
  
  
  
    state(): State { 
  
  
  
      return { 
  
  
  
        userName: "子君", 
  
  
  
      }; 
  
  
  
    }, 
  
  
  
  });

引入到main.ts中

 
 
 
 
  
  
  
  import { createApp } from 'vue' 
  
  
  
  import App from './App.vue' 
  
  
  
  import './index.css' 
  
  
  
  import router from './router/index' 
  
  
  
  import store from './store/index' 
  
  
  
  const  app = createApp(App) 
  
  
  
  app.use(router) 
  
  
  
  app.use(store) 
  
  
  
  app.mount('#app')

開發(fā)TodoList

通過(guò)上面的一系列操作，我們的開發(fā)環(huán)境就已經(jīng)配置完成了，接下來(lái)我們就通過(guò)新的開發(fā)環(huán)境先開發(fā)一個(gè)TodoList，來(lái)驗(yàn)證一下是否正常。

添加todolist頁(yè)面

首先我們先在src目錄下面新建一個(gè)views目錄，然后在其中新建文件todo-list.vue，并為文件添加以下內(nèi)容

 
 
 
 
  
  
  
   
  
  
  
      
  
  
  
      // 在vue2中 data 在vue3中使用 reactive代替 
  
  
  
     import { reactive, computed } from 'vue' 
  
  
  
     import { useRouter } from 'vue-router' 
  
  
  
     export default { 
  
  
  
       // setup相當(dāng)于vue2.0的 beforeCreate和 created，是vue3新增的一個(gè)屬性，所有的操作都在此屬性中完成 
  
  
  
       setup(props, context) { 
  
  
  
         // 通過(guò)reactive 可以初始化一個(gè)可響應(yīng)的數(shù)據(jù)，與Vue2.0中的Vue.observer很相似 
  
  
  
         const state = reactive({ 
  
  
  
           todoList: [{
  
  
  
              id: 1, 
  
  
  
             done: false, 
  
  
  
             text: '吃飯' 
  
  
  
           },{ 
  
  
  
             id: 2, 
  
  
  
             done: false, 
  
  
  
             text: '睡覺'
  
  
  
            },{ 
  
  
  
             id: 3, 
  
  
  
             done: false, 
  
  
  
             text: '打豆豆' 
  
  
  
           }], 
  
  
  
           todo: '' 
  
  
  
         }) 
  
  
  
         // 使用計(jì)算屬性生成待辦列表 
  
  
  
         const todos = computed(() => { 
  
  
  
           return state.todoList.filter(item => !item.done) 
  
  
  
         }) 
  
  
  
         // 使用計(jì)算屬性生成已辦列表 
  
  
  
         const dones = computed(() => { 
  
  
  
           return state.todoList.filter(item => item.done) 
  
  
  
         }) 
  
  
  
         // 修改待辦狀態(tài) 
  
  
  
         const handleChangeStatus = (item ,status) => { 
  
  
  
           item.done = status 
  
  
  
         }    
  
  
  
          // 新增待辦 
  
  
  
         const handleAddTodo = () => { 
  
  
  
           if(!state.todo) { 
  
  
  
             alert('請(qǐng)輸入待辦事項(xiàng)') 
  
  
  
             return 
  
  
  
           } 
  
  
  
           state.todoList.push({ 
  
  
  
             text: state.todo, 
  
  
  
             id: Date.now(), 
  
  
  
             done: false 
  
  
  
           }) 
  
  
  
           state.todo = '' 
  
  
  
         }
  
  
  
             // 在Vue3.0中，所有的數(shù)據(jù)和方法都通過(guò)在setup 中 return 出去，然后在template中使用 
  
  
  
         return { 
  
  
  
           state, 
  
  
  
           todos, 
  
  
  
           dones, 
  
  
  
           handleChangeStatus, 
  
  
  
           handleAddTodo 
  
  
  
         } 
  
  
  
       } 
  
  
  
     } 
  
  
  
      
  
  
  
      
  
  
  
     .todo-list{ 
  
  
  
       text-align: center; 
  
  
  
     } 
  
  
  
     .todo-list ul li { 
  
  
  
       list-style: none; 
  
  
  
     }

調(diào)整路由

首先將App.vue文件內(nèi)容修改為

 
 
 
 
  
  
  
   
  
  
  
         
  
  
  
        export default { 
  
  
  
          name: 'App' 
  
  
  
        }

2. 然后修改 router/index.ts文件，添加新的路由

 
 
 
 
  
  
  
  import {createRouter, createWebHashHistory} from 'vue-router' 
  
  
  
         // 在 Vue-router新版本中，需要使用createRouter來(lái)創(chuàng)建路由 
  
  
  
         export default createRouter({ 
  
  
  
           // 指定路由的模式,此處使用的是hash模式 
  
  
  
           history: createWebHashHistory(), 
  
  
  
           // 路由地址 
  
  
  
           routes: [{ 
  
  
  
             path: '/todolist', 
  
  
  
             // 必須添加.vue后綴 
  
  
  
             component: () => import('../views/todo-list.vue')
  
  
  
           }] 
  
  
  
         })

這時(shí)候我們就可以通過(guò)http://localhost:3000/#/todolist來(lái)訪問(wèn)TodoList了，效果如下圖所示

總結(jié)

到此，我們Vue3.0的開發(fā)環(huán)境算是搭建完成了，當(dāng)然現(xiàn)在還有好多好多要完善的東西，比如我們還需要去調(diào)整一下typescript的配置，然后添加eslint等等。同時(shí)如何在組件中跳轉(zhuǎn)路由，使用vuex還沒有去講解，不過(guò)至少我們已經(jīng)起步了，更多的內(nèi)容將會(huì)在下一篇文章中講到。本文首發(fā)于公眾號(hào)【前端有的玩】，歡迎關(guān)注加我好友，我們一起探討Vue3.0

當(dāng)前文章：學(xué)習(xí)Vue3.0，先從搭建環(huán)境開始
新聞來(lái)源：http://fisionsoft.com.cn/article/djpjced.html

新聞中心

待辦列表({{todos.length}})

已辦列表({{dones.length}})

其他資訊