Vite2 + Vue3搭建项目脚手架

前言：想成为1秒真男人吗？那就使用Vite2吧！

环境

安装node稳定版本：https://nodejs.org
node自带npm环境。

起步

vite官网：https://cn.vitejs.dev/guide/#trying-vite-online

使用npm快速搭建vite项目：

npm init vite@latest
# 根据提示输入项目名称：vite-app
# 选择vue，使用vue
cd vite-app
npm i
npm run dev
# 完成以上步骤即可快速完成一个vite2-vue3项目的搭建

步骤截图：

启动完之后打开 http://localhost:3000，看到下面的页面则表示启动成功

安装Element-plus

npm i element-plus -S

编辑main.ts，修改为如下配置

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

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

安装Vue-Router@4

npm install vue-router@4

新建文件夹 router，创建 index.js文件，写入下面的内容：

//从VueRouter中导入需要的函数模块
import {createRouter, createWebHashHistory } from 'vue-router'
// 导入 HelloWorld.vue 组件
const routes = [
  { path: '/', component: () => import('../components/HelloWorld.vue')}
]

// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})

//导出router
export default router

在main.js里面引入：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router'

createApp(App).use(ElementPlus).use(router).mount('#app')

修改 App.vue 的内容：

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

重启项目： npm run dev

访问主页，内容已经发生了变化：
未完待续…