Vue3+Element plus项目搭建

搭建vue3方法：

方法一

1. 新建index.html文件，导入html模板
2. 在head头部通过CDN引入Vue3和Element-plus UI框架
3. 新增标签属性id，并加入按钮的点击事件和变量
4. 定义变量运用组合式api以及setup函数绑定变量暴露事件
5. 最后创建应用将变量和插件挂在到节点上

    
    
    
    
    
    
    
    
    
  


    

        点击了{{time}}次
    


 

方法二

1. 通过脚手架Vite创建项目

npm init vite@latest 

2. 输入项目名称

? Project name: » vite-vue3 

3. 选择框架（vue）

Select a framework: » - Use arrow-keys. Return to submit.
    vanilla
>   vue
    react
    preact
    lit
    svelte 

4. 选择模板

Select a variant: » - Use arrow-keys. Return to submit.
>   vue
    vue-ts 

5. 启动项目

cd vite-vue3
npm install
npm run dev 

方法三

1. 通过脚手架vue-cli创建项目

npm install -g @vue/cli
vue create cli-vue3 

2. 选择预先配置

? Please pick a preset:
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features 

3. 启动项目

cd cli-vue3
npm run serve 

安装插件

1. 安装Element plus

npm install element-plus --save 

2. main.js导入Element plus,全局配置对象

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

const app = createApp(App)
app.use(ElementPlus, {
    size: 'small',
    zIndex: 3000,
    locale: zhCn
})

app.mount('#app') 

3. 实例化组件运用基础组件

脚手架vite与vue-cli运行时间对比

vite运行时间261毫秒

vue-cli运行时间14697毫秒