关于vue.js:学习Vue30先从搭建环境开始

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

这是小编对于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我的项目

初始化我的项目, 在工作空间关上终端窗口，对于window用户即cmd，而后执行上面命令
```
yarn create vite-app my-vue3
```
执行之后就会输入以下内容，能够看到新建我的项目特地快，仅仅用了1.63s
初始化完我的项目，通过cd my-vue3进行到我的项目外面，而后再执行yarn装置依赖（此处倡议应用淘宝镜像，比拟快）
依赖装置完须要通过yarn dev启动我的项目

是不是霎时体验到了秒启我的项目的感觉，启动之后就能够通过http://localhost:3000来拜访我的项目了

查看我的项目构造

应用vscode关上我的项目之后，能够查看到新建的我的项目构造与vue-cli4创立的我的项目构造根本一样，都是咱们很相熟的App.vue和main.js

查看main.js文件内容

关上main.js

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

发现创立Vue的形式变了，原来是通过new Vue的办法来初始化Vue，在Vue3.0中，批改为了通过createApp的形式，对于Vue3.0的更多应用形式，咱们将在前面的系列文章中逐步为您带来解说。

配置typescript

typescript当初曾经成为了前端必备技能之一，大量的我的项目也开始基于typescript进行开发。在应用Vue2.0的时候，因为Vue2.0没有对typescript进行反对，所以应用ts开发性能显示有些顺当。但到了Vue3，其本身源码便是基于ts开发的，所以对ts天生有着很好的反对。应用vite配置typescript很简略，只须要进行以下几步操作.

装置 typescript
```
yarn add typescript -D
```

初始化tsconfig.json

# 而后在控制台执行上面命令
npx tsc --init

将main.js批改为main.ts,同时将index.html外面的援用也批改为main.ts, 通过还须要批改App.vue与HelloWorld.vue文件，批改形式如下
```

<script lang="ts">
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>
```
批改完之后，重启就能够拜访我的项目了。尽管这样配置是能够了，然而关上main.ts会发现import App from App.vue会报错: Cannot find module './App.vue' or its corresponding type declarations.,这是因为当初ts还没有辨认vue文件，须要进行上面的配置:
1. 在我的项目根目录增加shim.d.ts文件
2. 增加以下内容
```
declare module "*.vue" {
  import { Component } from "vue";
  const component: Component;
  export default component;
}
```

接下来你就能够开开心心的在组件中应用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进行装置，而是须要带上版本号

yarn add vue-router@4.0.0-beta.7

配置vue-router

在我的项目src目录上面新建router目录，而后增加index.ts文件，在文件中增加以下内容

import {createRouter, createWebHashHistory} from 'vue-router'

// 在 Vue-router新版本中，须要应用createRouter来创立路由
export default createRouter({
  // 指定路由的模式,此处应用的是hash模式
  history: createWebHashHistory(),
  // 路由地址
  routes: []
})

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

将`router`引入到`main.ts`中

批改main.ts文件内容如下

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router/index'

const  app = createApp(App)
// 通过use 将 路由插件装置到 app 中
app.use(router)
app.mount('#app')

配置 vuex

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

装置vuex

yarn add vuex@4.0.0-beta.4

配置vuex

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

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')

开发TodoList

通过下面的一系列操作，咱们的开发环境就曾经配置实现了，接下来咱们就通过新的开发环境先开发一个TodoList，来验证一下是否失常。

增加`todolist`页面

首先咱们先在src目录上面新建一个views目录，而后在其中新建文件todo-list.vue，并为文件增加以下内容


<template>
  <div class="todo-list">
    <div>
      <label>新增待办</label>
       <input v-model="state.todo" @keyup.enter="handleAddTodo">
    </div>
    <div>
      <h3>待办列表({{todos.length}})</h3>
      <ul>
        <li v-for="item in todos" :key="item.id" @click="handleChangeStatus(item, true)">
          <input type="checkbox">
          <label>{{item.text}}</label>
        </li>
      </ul>
    </div>
    <div><h3>已办列表({{dones.length}})</h3></div>
    <ul>
      <li v-for="item in dones" :key="item.id" @click="handleChangeStatus(item, false)">
          <input type="checkbox" checked>
          <label>{{item.text}}</label>
        </li>
    </ul>
  </div>
</template>
<script lang="ts">
 // 在vue2中 data 在vue3中应用 reactive代替
import { reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
export default {
  // setup相当于vue2.0的 beforeCreate和 created，是vue3新增的一个属性，所有的操作都在此属性中实现
  setup(props, context) {
    // 通过reactive 能够初始化一个可响应的数据，与Vue2.0中的Vue.observer很类似
    const state = reactive({
      todoList: [{
        id: 1,
        done: false,
        text: '吃饭'
      },{
        id: 2,
        done: false,
        text: '睡觉'
      },{
        id: 3,
        done: false,
        text: '打豆豆'
      }],
      todo: ''
    })
    // 应用计算属性生成待办列表
    const todos = computed(() => {
      return state.todoList.filter(item => !item.done)
    })

    // 应用计算属性生成已办列表
    const dones = computed(() => {
      return state.todoList.filter(item => item.done)
    })

    // 批改待办状态
    const handleChangeStatus = (item ,status) => {
      item.done = status
    }
    
    // 新增待办
    const handleAddTodo = () => {
      if(!state.todo) {
        alert('请输出待办事项')
        return
      }
      state.todoList.push({
        text: state.todo,
        id: Date.now(),
        done: false
      })
      state.todo = ''
    }

        // 在Vue3.0中，所有的数据和办法都通过在setup 中 return 进来，而后在template中应用
    return {
      state,
      todos,
      dones,
      handleChangeStatus,
      handleAddTodo
    }
  }
}
</script>
<style scoped>
.todo-list{
  text-align: center;
}

.todo-list ul li {
  list-style: none;
}
</style>

调整路由

首先将App.vue文件内容批改为

<template>
  <router-view></router-view>
</template>

<script lang="ts">

export default {
  name: 'App'
}
</script>

而后批改 router/index.ts文件，增加新的路由

import {createRouter, createWebHashHistory} from 'vue-router'

// 在 Vue-router新版本中，须要应用createRouter来创立路由
export default createRouter({
  // 指定路由的模式,此处应用的是hash模式
  history: createWebHashHistory(),
  // 路由地址
  routes: [{
    path: '/todolist',
    // 必须增加.vue后缀
    component: () => import('../views/todo-list.vue')
  }]
})

这时候咱们就能够通过http://localhost:3000/#/todolist来拜访TodoList了，成果如下图所示

总结

到此，咱们Vue3.0的开发环境算是搭建实现了，当然当初还有好多好多要欠缺的货色，比方咱们还须要去调整一下typescript的配置，而后增加eslint等等。同时如何在组件中跳转路由，应用vuex还没有去解说，不过至多咱们曾经起步了，更多的内容将会在下一篇文章中讲到。本文首发于公众号【前端有的玩】，欢送关注加我好友，咱们一起探讨Vue3.0

关于vue.js:学习Vue30先从搭建环境开始

应用`vite`初始化我的项目

vite 介绍

为什么要用vite

初始化vite我的项目

查看我的项目构造

查看main.js文件内容

配置typescript

配置 `vue-router`

装置`vue-router`

配置vue-router

将`router`引入到`main.ts`中

配置 vuex

装置vuex

配置vuex

引入到`main.ts`中

开发TodoList

增加`todolist`页面

调整路由

总结

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于vue.js:学习Vue30先从搭建环境开始

应用vite初始化我的项目

vite 介绍

为什么要用vite

初始化vite我的项目

查看我的项目构造

查看main.js文件内容

配置typescript

配置 vue-router

装置vue-router

配置vue-router

将router引入到main.ts中

配置 vuex

装置vuex

配置vuex

引入到main.ts中

开发TodoList

增加todolist页面

调整路由

总结

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

应用`vite`初始化我的项目

配置 `vue-router`

装置`vue-router`

将`router`引入到`main.ts`中

引入到`main.ts`中

增加`todolist`页面

发表回复取消回复