前言:想成为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
访问主页,内容已经发生了变化:
未完待续…