Vite+Vue2开荒

# 一. 前言

Vite作为下一代的构建工具, 在速度上比webpack5快很多

一直以来, Vite都是跟Vue3一起用的. 用了一段时间觉得还挺香的

能不能将Vite和Vue2结合使用呢? 官方说是可以的, 但是一直没空研究.

结果, 一不小心一天时间都给我整没了. 唉, 果然是知易行难, 纸上得来终觉浅, 绝知此事要躬行~

# 二. 开整

# 1) 准备工作

node版本: >= 12.0.0
设置taobao源
安装yarn

示例

通过如下命令检查环境

node -v
npm -v
npm config get registry

1
2
3

这里, 给出我的环境大家参考.

如果npm不是taobao源, 可以执行命令切换

npm config set registry https://registry.npm.taobao.org

安装yarn

为什么用yarn, 而不用npm

虽然npm 5以后有很多改进, 但是我在使用npm安装时, 时不时还是会抽风.

就换用yarn了. 用到现在一直挺稳定的

npm install yarn -g

# 2) 初始化项目

这里, 我创建了一个vite-vue2的目录作为工作目录

yarn init -y

生成pagckage.json

# 3) 安装vue

yarn add vue

# 4) 安装vite

yarn add vite -D

# 5) 安装插件

yarn add vite-plugin-vue2 -D

第一次安装这个插件很慢, 这个插件卡了好久.

我用npm和cnpm都尝试过了, 均失败了.

最后用yarn安装成功, 完美~

# 三. 配置

在根目录编写vite配置文件vite.config.js

const { createVuePlugin } = require('vite-plugin-vue2')

module.exports = {
  plugins: [createVuePlugin()],
}

1
2
3
4
5

编写package.json

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview"
},

1
2
3
4
5

dev: 启动开发服务器
build: 为生产环境构建产物
serve: 本地预览生产构建产物

# 四. 基本框架

# 1) 首页

在根目录下创建index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite-Vue2</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13

# 2) 入口文件

创建src/main.js入口文件

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: (h) => h(App),
}).$mount('#app')

1
2
3
4
5
6

# 3) App.vue

创建src/App.vue文件

<template>
  <div>This is a vite + vue2 app</div>
</template>

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

1
2
3
4
5
6
7
8
9

# 五. 测试

执行命令启动服务

yarn dev

提示vue-template-compiler没有安装

那就安装一下

yarn add vue-template-compiler

500ms的启动速度, 飞一般的感觉

如果觉得有帮助, 可以微信扫码, 请杰哥喝杯咖啡~

上次更新: 2021/09/28, 19:58:19

← git fetch详解 windows终端美化→