确定版本
node -v
vue - V
v.14.18.1
@vue/cli 4.5.15
创建项目
在对应的位置
yarn create vite my-vue3 --template vue
在my-vue3文件中安装依赖
yarn install
运行
yarn dev
安装element plus
yarn add element-plus -S
按需引用
安装插件
npm install -D unplugin-vue-components unplugin-auto-import
在vite.config.js中添加
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
并修改为
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
})
],
})
之后在vue中直接使用标签即可
路由设置
安装
cnpm install vue-router -S
创建各种文件夹和文件
src/router/index.js 引用router
import { createRouter, createMemoryHistory } from "vue-router";
const routes = [
{
path: '/',
component: () => import('../views/Main.vue'),
children:[
{
path: '/',
name: 'home',
component: () =>import('../views/home/Home.vue')
}
]
}
]
const router = createRouter({
history: createMemoryHistory(),
routes
})
export default router
</