Vue3+Element plus项目搭建

优速盾-小U • 2022年8月30日 00:35 • 行业资讯 • 阅读 424

Vue3项目搭建方法

方法一：

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue3</title> <!-- 导入样式 --> <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" /> <!-- 导入 Vue 3 --> <script src="https://unpkg.com/vue@next"></script> <!-- 导入组件库 --> <script src="//unpkg.com/element-plus"></script> </head> <body> <div id="app"> <el-button type="primary" @click="onClick">点击了{{time}}次</el-button> </div> </body> <script> const vue3Composition = { setup() { const time = Vue.ref(0) const onClick = () => { time.value ++ } return { time, onClick } } } const vm = Vue.createApp(vue3Composition).use(ElementPlus).mount('#app') </script> </html>

方法二：

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

安装Element plus插件

npm install element-plus --save

1. 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')

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

<script setup> import { ref } from 'vue' const time = ref(0) const onClick = () => { time.value ++ } </script> <template> <el-button type="primary" @click="onClick">点击了{{time}}次</el-button> </template>

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

vue-cli运行时间14697毫秒

vite运行时间261毫秒

原文链接：https://blog.csdn.net/qq_42365152/article/details/124454977?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165934461816782390562794%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165934461816782390562794&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-3-124454977-null-null.article_score_rank_blog&utm_term=%E6%90%AD%E5%BB%BAcdn

原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/8045