学习Vue3.0，先从搭建环境开始

Bug源测试，上线来几个。愿君多修改，今夜眼难合。

创新互联是一家专业提供剑河企业网站建设,专注与成都网站建设、网站建设、html5、小程序制作等业务。10年已为剑河众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。

这是小编关于Vue3.0系列文章的第二篇，本文将带您从零搭建一个基于Vue3.0与vite的Vue3.0开发环境，通过本文的学习，你将学习到以下内容：

  •  使用vite初始化Vue3.0项目
  •  配置ts
  •  配置vue-router
  •  配置vuex
  •  使用Vue3.0开发一个TodoList示例

同时本文的内容已录制为视频发布到了B站，可以点击链接跳转到视频地址，同时您也可以通过微信搜索【前端有的玩】关注我的公众号加我微信好友，手摸手和你一起学习Vue3.0

使用vite初始化项目

vite 介绍

vite是尤大大在今年新鼓捣出来的一个工具，尤大大对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 是一个由原生 ES Module 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于 Rollup 打包。

上面这段话提到了一个关键字ES Module,这个是什么呢？详细的介绍大家可以访问 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules 进行查看。此处我们长话短说。在最早的时候，还没有前端工程化，然后我们写javascript都是写到一个文件，然后通过script标签去引用，后来随着前端发展越来越壮大，js之间依赖越来越复杂，这时候就需要有一种可以将JavaScript 程序拆分为可按需导入的单独模块的机制来维护这个依赖，随之就诞生了AMD,CMD等等，而ES Module就是浏览器支持的原生模块依赖的功能。

为什么要用vite

为什么尤大大要推出vite，在我们使用webpack的时候，每次开发时候启动项目都需要几十秒甚至超过一分钟，比较慢，而且热更新也比较慢，而vite的主要特点就是快，官网对于vite的特点是这样描述的

  •  快速的冷启动
  •  即时的模块热更新
  •  真正的按需编译

到底有多快呢，我们先新建一个项目试试

初始化vite项目

  1.  初始化项目, 在工作空间打开终端窗口，对于window用户即cmd，然后执行下面命令  
 
 
 
 
    
  
  
  
  
  1. yarn create vite-app my-vue3
    2.

执行之后就会输出以下内容，可以看到新建项目特别快，仅仅用了1.63s

      2.  初始化完项目，通过cd my-vue3进行到项目里面，然后再执行yarn安装依赖（此处建议使用淘宝镜像，比较快）

      3.  依赖安装完需要通过yarn dev启动项目

是不是瞬间体验到了秒启项目的感觉，启动之后就可以通过http://localhost:3000来访问项目了

查看项目结构

使用vscode打开项目之后，可以查看到新建的项目结构与vue-cli4创建的项目结构基本一样，都是我们很熟悉的App.vue和main.js

查看main.js文件内容

打开main.js

 
 
 
 
    
  
  
  
  
  1. import { createApp } from 'vue' 
    2. 
  
  
  
  
  2. import App from './App.vue' 
    3. 
  
  
  
  
  3. import './index.css' 
    4. 
  
  
  
  
  4. createApp(App).mount('#app')
    5.

发现创建Vue的方式变了，原来是通过new Vue的方法来初始化Vue，在Vue3.0中，修改为了通过createApp的方式，关于Vue3.0的更多使用方式，我们将在后面的系列文章中逐渐为您带来讲解。

配置typescript

typescript现在已经成为了前端必备技能之一，大量的项目也开始基于typescript进行开发。在使用Vue2.0的时候，因为Vue2.0没有对typescript进行支持，所以使用ts开发功能显示有些别扭。但到了Vue3，其自身源码便是基于ts开发的，所以对ts天生有着很好的支持。使用vite配置typescript很简单，只需要进行以下几步操作.

  1.  安装 typescript  
 
 
 
 
    
  
  
  
  
  1. yarn add typescript -D
    2.

      2.  初始化tsconfig.json

 
 
 
 
    
  
  
  
  
  1. # 然后在控制台执行下面命令
    2.

    npx tsc --init

      3.  将main.js修改为main.ts,同时将index.html里面的引用也修改为main.ts, 通过还需要修改App.vue与HelloWorld.vue文件，修改方式如下

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.      
    3. 
  
  
  
  
  3.     import HelloWorld from './components/HelloWorld.vue' 
    4. 
  
  
  
  
  4.     export default { 
    5. 
  
  
  
  
  5.       name: 'App', 
    6. 
  
  
  
  
  6.       components: { 
    7. 
  
  
  
  
  7.         HelloWorld 
    8. 
  
  
  
  
  8.       } 
    9. 
  
  
  
  
  9.     } 
    10. 
  
  
  
  
  10.     
    11.

修改完之后，重启就可以访问项目了。虽然这样配置是可以了，但是打开main.ts会发现import App from App.vue会报错: Cannot find module './App.vue' or its corresponding type declarations.,这是因为现在ts还没有识别vue文件，需要进行下面的配置:

  1.  在项目根目录添加shim.d.ts文件
  2.  添加以下内容      
 
 
 
 
    
  
  
  
  
  1. declare module "*.vue" { 
    2. 
  
  
  
  
  2.          import { Component } from "vue"; 
    3. 
  
  
  
  
  3.          const component: Component; 
    4. 
  
  
  
  
  4.          export default component; 
    5. 
  
  
  
  
  5.        }
    6.

接下来你就可以开开心心的在组件中使用ts了

配置 vue-router

在Vue2.0中我们路由一般会选择使用vue-router,在Vue3.0依然可以使用vue-router,不过和Vue3.0一样当前vue-router的版本也是beta版本，在本文撰写的时候，版本是4.0.0-beta7

安装vue-router

因为当前vue-router针对vue3.0的版本还是beta版本，所以不能直接通过yarn add vue-router进行安装，而是需要带上版本号

 
 
 
 
    
  
  
  
  
  1. yarn add vue-router@4.0.0-beta.7
    2.

配置vue-router

在项目src目录下面新建router目录，然后添加index.ts文件，在文件中添加以下内容

 
 
 
 
    
  
  
  
  
  1. import {createRouter, createWebHashHistory} from 'vue-router' 
    2. 
  
  
  
  
  2. // 在 Vue-router新版本中，需要使用createRouter来创建路由 
    3. 
  
  
  
  
  3. export default createRouter({ 
    4. 
  
  
  
  
  4.   // 指定路由的模式,此处使用的是hash模式 
    5. 
  
  
  
  
  5.   history: createWebHashHistory(), 
    6. 
  
  
  
  
  6.   // 路由地址 
    7. 
  
  
  
  
  7.   routes: []
    8. 
  
  
  
  
  8.  })
    9.

与新的Vue3.0初始化方式发生变化一样，vue-router的初始化方式也发生了变化，变成了通过createRouter来初始化路由。

将router引入到main.ts中

修改main.ts文件内容如下

 
 
 
 
    
  
  
  
  
  1. import { createApp } from 'vue' 
    2. 
  
  
  
  
  2. import App from './App.vue'
    3. 
  
  
  
  
  3. import './index.css' 
    4. 
  
  
  
  
  4. import router from './router/index' 
    5. 
  
  
  
  
  5. const  app = createApp(App) 
    6. 
  
  
  
  
  6. // 通过use 将 路由插件安装到 app 中 
    7. 
  
  
  
  
  7. app.use(router) 
    8. 
  
  
  
  
  8. app.mount('#app')
    9.

配置 vuex

与vue-router一样，新的vuex当前也处于beta版本，当前版本是4.0.0-beta.4

安装vuex

 
 
 
 
    
  
  
  
  
  1. yarn add vuex@4.0.0-beta.4
    2.

配置vuex

在项目src目录下面新建store目录，并添加index.ts文件，文件中添加以下内容

 
 
 
 
    
  
  
  
  
  1. import { createStore } from 'vuex' 
    2. 
  
  
  
  
  2. interface State { 
    3. 
  
  
  
  
  3.   userName: string 
    4. 
  
  
  
  
  4. } 
    5. 
  
  
  
  
  5. export default createStore({ 
    6. 
  
  
  
  
  6.   state(): State { 
    7. 
  
  
  
  
  7.     return { 
    8. 
  
  
  
  
  8.       userName: "子君", 
    9. 
  
  
  
  
  9.     }; 
    10. 
  
  
  
  
  10.   }, 
    11. 
  
  
  
  
  11. });
    12.

引入到main.ts中

 
 
 
 
    
  
  
  
  
  1. import { createApp } from 'vue' 
    2. 
  
  
  
  
  2. import App from './App.vue' 
    3. 
  
  
  
  
  3. import './index.css' 
    4. 
  
  
  
  
  4. import router from './router/index' 
    5. 
  
  
  
  
  5. import store from './store/index' 
    6. 
  
  
  
  
  6. const  app = createApp(App) 
    7. 
  
  
  
  
  7. app.use(router) 
    8. 
  
  
  
  
  8. app.use(store) 
    9. 
  
  
  
  
  9. app.mount('#app')
    10.

开发TodoList

通过上面的一系列操作，我们的开发环境就已经配置完成了，接下来我们就通过新的开发环境先开发一个TodoList，来验证一下是否正常。

添加todolist页面

  1.  首先我们先在src目录下面新建一个views目录，然后在其中新建文件todo-list.vue，并为文件添加以下内容  
 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.     
    3. 
  
  
  
  
  3.     // 在vue2中 data 在vue3中使用 reactive代替 
    4. 
  
  
  
  
  4.    import { reactive, computed } from 'vue' 
    5. 
  
  
  
  
  5.    import { useRouter } from 'vue-router' 
    6. 
  
  
  
  
  6.    export default { 
    7. 
  
  
  
  
  7.      // setup相当于vue2.0的 beforeCreate和 created，是vue3新增的一个属性，所有的操作都在此属性中完成 
    8. 
  
  
  
  
  8.      setup(props, context) { 
    9. 
  
  
  
  
  9.        // 通过reactive 可以初始化一个可响应的数据，与Vue2.0中的Vue.observer很相似 
    10. 
  
  
  
  
  10.        const state = reactive({ 
    11. 
  
  
  
  
  11.          todoList: [{
    12. 
  
  
  
  
  12.             id: 1, 
    13. 
  
  
  
  
  13.            done: false, 
    14. 
  
  
  
  
  14.            text: '吃饭' 
    15. 
  
  
  
  
  15.          },{ 
    16. 
  
  
  
  
  16.            id: 2, 
    17. 
  
  
  
  
  17.            done: false, 
    18. 
  
  
  
  
  18.            text: '睡觉'
    19. 
  
  
  
  
  19.           },{ 
    20. 
  
  
  
  
  20.            id: 3, 
    21. 
  
  
  
  
  21.            done: false, 
    22. 
  
  
  
  
  22.            text: '打豆豆' 
    23. 
  
  
  
  
  23.          }], 
    24. 
  
  
  
  
  24.          todo: '' 
    25. 
  
  
  
  
  25.        }) 
    26. 
  
  
  
  
  26.        // 使用计算属性生成待办列表 
    27. 
  
  
  
  
  27.        const todos = computed(() => { 
    28. 
  
  
  
  
  28.          return state.todoList.filter(item => !item.done) 
    29. 
  
  
  
  
  29.        }) 
    30. 
  
  
  
  
  30.        // 使用计算属性生成已办列表 
    31. 
  
  
  
  
  31.        const dones = computed(() => { 
    32. 
  
  
  
  
  32.          return state.todoList.filter(item => item.done) 
    33. 
  
  
  
  
  33.        }) 
    34. 
  
  
  
  
  34.        // 修改待办状态 
    35. 
  
  
  
  
  35.        const handleChangeStatus = (item ,status) => { 
    36. 
  
  
  
  
  36.          item.done = status 
    37. 
  
  
  
  
  37.        }    
    38. 
  
  
  
  
  38.         // 新增待办 
    39. 
  
  
  
  
  39.        const handleAddTodo = () => { 
    40. 
  
  
  
  
  40.          if(!state.todo) { 
    41. 
  
  
  
  
  41.            alert('请输入待办事项') 
    42. 
  
  
  
  
  42.            return 
    43. 
  
  
  
  
  43.          } 
    44. 
  
  
  
  
  44.          state.todoList.push({ 
    45. 
  
  
  
  
  45.            text: state.todo, 
    46. 
  
  
  
  
  46.            id: Date.now(), 
    47. 
  
  
  
  
  47.            done: false 
    48. 
  
  
  
  
  48.          }) 
    49. 
  
  
  
  
  49.          state.todo = '' 
    50. 
  
  
  
  
  50.        }
    51. 
  
  
  
  
  51.            // 在Vue3.0中，所有的数据和方法都通过在setup 中 return 出去，然后在template中使用 
    52. 
  
  
  
  
  52.        return { 
    53. 
  
  
  
  
  53.          state, 
    54. 
  
  
  
  
  54.          todos, 
    55. 
  
  
  
  
  55.          dones, 
    56. 
  
  
  
  
  56.          handleChangeStatus, 
    57. 
  
  
  
  
  57.          handleAddTodo 
    58. 
  
  
  
  
  58.        } 
    59. 
  
  
  
  
  59.      } 
    60. 
  
  
  
  
  60.    } 
    61. 
  
  
  
  
  61.     
    62. 
  
  
  
  
  62.     
    63. 
  
  
  
  
  63.    .todo-list{ 
    64. 
  
  
  
  
  64.      text-align: center; 
    65. 
  
  
  
  
  65.    } 
    66. 
  
  
  
  
  66.    .todo-list ul li { 
    67. 
  
  
  
  
  67.      list-style: none; 
    68. 
  
  
  
  
  68.    } 
    69. 
  
  
  
  
  69.    
    70.

调整路由

  1.  首先将App.vue文件内容修改为    
 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.        
    3. 
  
  
  
  
  3.       export default { 
    4. 
  
  
  
  
  4.         name: 'App' 
    5. 
  
  
  
  
  5.       }
    6. 
  
  
  
  
  6.        
    7.

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

 
 
 
 
    
  
  
  
  
  1. import {createRouter, createWebHashHistory} from 'vue-router' 
    2. 
  
  
  
  
  2.        // 在 Vue-router新版本中，需要使用createRouter来创建路由 
    3. 
  
  
  
  
  3.        export default createRouter({ 
    4. 
  
  
  
  
  4.          // 指定路由的模式,此处使用的是hash模式 
    5. 
  
  
  
  
  5.          history: createWebHashHistory(), 
    6. 
  
  
  
  
  6.          // 路由地址 
    7. 
  
  
  
  
  7.          routes: [{ 
    8. 
  
  
  
  
  8.            path: '/todolist', 
    9. 
  
  
  
  
  9.            // 必须添加.vue后缀 
    10. 
  
  
  
  
  10.            component: () => import('../views/todo-list.vue')
    11. 
  
  
  
  
  11.          }] 
    12. 
  
  
  
  
  12.        })
    13.

这时候我们就可以通过http://localhost:3000/#/todolist来访问TodoList了，效果如下图所示

总结

到此，我们Vue3.0的开发环境算是搭建完成了，当然现在还有好多好多要完善的东西，比如我们还需要去调整一下typescript的配置，然后添加eslint等等。同时如何在组件中跳转路由，使用vuex还没有去讲解，不过至少我们已经起步了，更多的内容将会在下一篇文章中讲到。本文首发于公众号【前端有的玩】，欢迎关注加我好友，我们一起探讨Vue3.0

分享题目：学习Vue3.0，先从搭建环境开始
链接URL：http://www.mswzjz.com/qtweb/news48/177348.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

移动网站建设知识

分类信息网站

seo推广公司　　 　APP定制　　 　高防机房　　 　成都h5网站建设　　 　成都网站推广　　 　眉山服务器托管　　 　全网营销　　 　温江网站建设　　 　成都APP定制开发　　 　成都展柜制作　　 　自适应网页设计　　 　微博营销　　 　重庆网站设计　　 　联通机柜租用　　 　铁科精智测控　　 　成都免费网站建设　　 　鸿程源茂　　 　光华村机房　　 　成都二枢电信服务器托管　　 　成都保温材料