当前位置:   article > 正文

vue3.0+vue-router+element-plus初实践_vue3,vue-router项目实例

vue3,vue-router项目实例

Vue3中文文档

Vue3.0对比Vue2.x优势
  1. 框架内部做了大量的性能优化,包括:虚拟dom,编译模板,Proxy的新数据监听,更小的打包文件等。
  2. 新增的组合式API(即Composition API),更适合大型项目的编写方式。
  3. 对TypeScript支持更好,去掉this操作,更强大的类型推导。

初始化项目

  1. 安装@vue/cli

     npm install @vue/cli -gyarn global add @vue/cli
    
    • 1
    • 2
  2. 创建项目

    vue create 项目名
    
    • 1

可以选择Vue3的配置进行项目初始化
在这里插入图片描述

  1. 初始化完成后,安装vue-router
    在 /src/router/index.js 中创建路由配置:

import { createRouter, createWebHashHistory } from 'vue-router'

const Test = () => import(/* webpackChunkName: "Test" */ '@/views/test/index')

const constantRoutes = [
  {
    path: '/v3-demo',
    component: Test
  }
]

// https://www.npmjs.com/package/vue-router
const router = createRouter({
  history: createWebHashHistory(),
  routes: constantRoutes,
})

export default router
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  1. 安装element-plus

main.js引入

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

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

效果

在这里插入图片描述

项目

Vue3+Vue-router4+Pinia/Vuex4+Vite+TypeScript开发

项目地址

本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读