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

本文是 Vue3.0 系列的第二篇：从零搭一套基于 Vue3.0 与 vite 的开发环境。学完可以完成初始化项目、配置 TypeScript、接入 vue-router 和 vuex，并用 Composition API 写一个 TodoList。

vite 在开发期走浏览器原生 ES Module，生产期用 Rollup 打包。和 webpack 冷启动动辄几十秒相比，它强调快速冷启动、即时热更新和真正的按需编译。

下面按「初始化 → TypeScript → 路由 → 状态 → 示例页」的顺序走一遍。文末 TodoList 用来验证整条链路是否通。

一、用 vite 初始化项目

vite 是什么、为什么快

尤雨溪对 vite 的原话是：开发时用 native ES Module imports 提供代码，生产用 Rollup 打包。早期前端没有工程化，脚本全塞一个文件；依赖复杂之后才有 AMD、CMD。ES Module 则是浏览器原生的模块机制，详见 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules。

webpack 每次启动都要打包整图，热更新也慢。vite 的卖点就是快：冷启动快、HMR 快、按需编译。先建一个项目感受一下。

初始化并启动

在工作空间打开终端（Windows 用 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')

Vue2 是 new Vue，Vue3 改成 createApp。更多用法会在后续文章展开。

二、配置 TypeScript

Vue2 对 TS 支持别扭；Vue3 源码本身就是 TS，配合 vite 接入很简单。

1. 安装：

yarn add typescript -D

2. 生成配置：

# 然后在控制台执行下面命令
npx tsc --init

3. 把 main.js 改成 main.ts，同步改 index.html 的引用。组件脚本改成如下形式（原文示例把 script 标成 TS 用法）：

<!--将 <script> 修改为 <script>-->
<script>
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。在根目录加 shim.d.ts：

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

之后就可以在组件里用 TS 了。

三、配置 vue-router

Vue3 仍然用 vue-router，当时针对 Vue3 的版本还是 beta，撰写时是 4.0.0-beta.7。不能直接 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: []
})

初始化从 new VueRouter 变成 createRouter。再改 main.ts 用 app.use(router)：

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

当时 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: "子君",
    };
  },
});

挂到应用上：

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>
    <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>
 // 在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>

setup 约等于 Vue2 的 beforeCreate + created。reactive 类似 Vue.observable。模板里用到的数据和方法都要从 setup 里 return。

调整路由

App.vue 改成只留出口：

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

<script>

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

再给 router/index.ts 加路由，动态 import 必须带 .vue 后缀：

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 即可看到效果：

环境算搭起来了。后面还要细调 TS、加 eslint，以及在组件里跳转路由、使用 vuex。至少已经起步。转载自：https://segmentfault.com/a/1190000023737670

一句话总结：vite 用原生 ESM 换来秒级启动；Vue3 用 createApp / createRouter / createStore 替换 new Vue 全家桶，setup + reactive 就能写出 TodoList。