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

1次阅读

共计 5846 个字符，预计需要花费 15 分钟才能阅读完成。

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 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，在咱们应用webpack 的时候，每次开发时候启动我的项目都须要几十秒甚至超过一分钟，比较慢，而且热更新也比较慢，而 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

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 进行开发。在应用 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

在我的项目 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')

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

yarn add vuex@4.0.0-beta.4

在我的项目 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` 页面

首先咱们先在 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

发表至： vue.js

2020-08-24

0

vuecli4配置文件别名

关于vue.js:Vue删除表格数据调用逻辑

关于vue.js:05vue路由

关于vue.js:微众银行开源的Vue前端工具Fesjs给现有的轮子上油

关于java:一文给你道破Eureka服务发现慢的原因深度剖析Eureka客户端服务发现原理以及-Eureka服务端服务剔除原理

关于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` 页面

调整路由

总结

站内搜索

关于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 页面

调整路由

总结

站内搜索

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

配置 `vue-router`

装置`vue-router`

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

引入到 `main.ts` 中

增加 `todolist` 页面