搭建vue3項目以及按需引入element-ui框架組件全過程

更新時間：2024年02月17日 08:55:58 作者：魚干～

element是基于vue.js框架開發(fā)的快速搭建前端的UI框架,下面這篇文章主要給大家介紹了關于搭建vue3項目以及按需引入element-ui框架組件的相關資料,文中通過圖文以及代碼介紹的非常詳細,需要的朋友可以參考下

1.使用dos命令安裝vue-cli腳手架

//這個是從鏡像源下載
cnpm install -g @vue/cli

查看安裝的版本（顯示版本號說明安裝成功）

vue --version

2.使用vue create命令搭建vue項目

1.cmd窗口跳到需要新建項目的文件夾下，使用vue create

//vuetest是我的項目名
vue create vue-element-plus

2.我這里選擇第三個Manually select features自定義選項操作并回車（至于第一個和第二個選項可以快速搭建帶eslint和babel的項目）

3.選擇配置項

我這里選擇了Babel、 TypeScript、Router、Vuex、Linter/Formatter三個選項（通過鍵盤上下鍵移動，使用空格鍵勾選），然后回車

>( ) Babel                              //  代碼編譯
 ( ) TypeScript                         //  ts
 ( ) Progressive Web App (PWA) Support  //  支持漸進式網(wǎng)頁應用程序
 ( ) Router                             //  vue路由
 ( ) Vuex                               //  狀態(tài)管理模式
 ( ) CSS Pre-processors                 //  css預處理
 ( ) Linter / Formatter                 //  代碼風格、格式校驗
 ( ) Unit Testing                       //  單元測試
 ( ) E2E Testing                        //  端對端測試

4.選擇vue的版本

我這里選擇第一個3.X,然后回車

5.選擇class風格的component

這里輸入N

對比選y和N的區(qū)別，截圖如下選N:

選Y:

6.選擇 Use Babel alongside TypeScript

這里輸入Y

7.選擇router的模式

vue-router分為兩種模式

hash
history

**hash：**
特征：
1.hash會在瀏覽器路徑里帶#號，比如http://locahost:8080/#/index
2.hash在瀏覽器改變路徑觸發(fā)頁面跳轉，即前進后退，但不會重新加載頁面。
3.hash傳參是基于url，如果要傳遞復雜的參數(shù)會有體積的限制


**history**
特征：
1.可以在url放參數(shù)，而且也可以將數(shù)據(jù)存放在一個特定的對象中，其利用HTML5 History inteface中新增的pushState()和replaceState()方法（限制：history只支持IE8以上）

2.需要后臺配置支持,前端的 URL 必須和實際向后端發(fā)起請求的 URL 一致，如 http://www.test.com/user/id 如果后端缺少對 /user/id 的路由處理，將返回 404 錯誤。

我這里使用router路由的history模式，輸入Y,然后回車（如果使用hash,則輸入n）

8.代碼語法錯誤檢查

我這里選擇ESLint + Standard config，這個是標準的，然后回車

9.選擇檢查代碼語法的時機

我這里選擇第一個Lint on save，然后回車

10.第三方配置文件存在的方式

我這里選擇第一個In dedicated config files，然后回車

11.是否保存本次配置為預設項目模板

我這里選擇N(也可以選擇Y，這樣下次可以直接使用該配置方案快速搭建項目)，然后回車，則項目搭建成功

12.搭建成功的示例

13.打開項目安裝依賴

在終端輸入如下代碼，安裝依賴包

yarn install

14.啟動項目

在終端輸入如下代碼，然后回車啟動項目

yarn serve

放在瀏覽器預覽

15.安裝elementUI框架

在終端控制臺輸入如下安裝

yarn add element-plus

在這里插入圖片描述
16.按需引入elementUI的組件在src\core文件夾下新建element.ts文件，代碼如下

import {
    ElConfigProvider,
  ElAlert,
  ElAside,
  ElAutocomplete,
  // ElAvatar,
  // ElBacktop,
  // ElBadge,
  // ElBreadcrumb,
  // ElBreadcrumbItem,
  // ElButtonGroup,
  // ElCalendar,
  ElCard,
  // ElCarousel,
  // ElCarouselItem,
  // ElCascader,
  // ElCascaderPanel,
  ElCheckbox,
  ElCheckboxButton,
  ElCheckboxGroup,
  // ElCollapse,
  // ElCollapseItem,
  // ElCollapseTransition,
  // ElColorPicker,
  ElContainer,
  // ElDatePicker,
  ElDialog,
  ElDivider,
  ElDrawer,
  ElDropdown,
  ElDropdownItem,
  ElDropdownMenu,
  // ElFooter,
  ElForm,
  ElFormItem,
  ElHeader,
  ElIcon,
  ElInputNumber,
  ElImage,
  ElMain,
  ElMenu,
  ElMenuItem,
  ElMenuItemGroup,
  ElOption,
  ElOptionGroup,
  // ElPageHeader,
  ElPagination,
  // ElPopconfirm,
  ElPopover,
  // ElPopper,
  // ElProgress,
  ElRadio,
  ElRadioButton,
  ElRadioGroup,
  // ElRate,
  ElCol,
  ElRow,
  // ElScrollbar,
  ElLink,
  // ElSlider,
  // ElStep,
  // ElSteps,
  ElSubMenu,
  ElSwitch,
  ElTabPane,
  ElTabs,
  ElTable,
  ElTableColumn,
  ElTag,
  // ElTimePicker,
  // ElTimeSelect,
  // ElTimeline,
  // ElTimelineItem,
  ElTooltip,
  ElTransfer,
  ElTree,
  ElUpload,
  // ElInfiniteScroll,
  // ElLoading,
  // ElMessage,
  // ElMessageBox,
  // ElNotification,
  ElColorPicker,
  ElDatePicker,
  ElDescriptions,
  ElDescriptionsItem,
  ElEmpty,
} from 'element-plus'
const components = [
    ElConfigProvider,
    ElRadio,
    ElRadioButton,
    ElRadioGroup,
    ElCheckbox,
    ElCheckboxButton,
    ElCheckboxGroup,
    ElLink,
    ElCard,
    ElForm,
    ElFormItem,
    ElHeader,
    ElIcon,
    ElInputNumber,
    ElAside,
    ElContainer,
    ElMain,
    ElMenu,
    ElMenuItem,
    ElMenuItemGroup,
    ElSubMenu,
    ElDropdown,
    ElDropdownItem,
    ElDropdownMenu,
    ElTabPane,
    ElTabs,
    ElTable,
    ElTableColumn,
    ElPagination,
    ElTag,
    ElDialog,
    ElTree,
    ElOption,
    ElOptionGroup,
    ElCol,
    ElRow,
    ElColorPicker,
    ElDatePicker,
    ElSwitch,
    ElPopover,
    ElImage,
    ElDescriptions,
    ElDescriptionsItem,
    ElDivider,
    ElDrawer,
    ElTooltip,
    ElTransfer,
    ElUpload,
    ElAlert,
    ElEmpty,
    ElAutocomplete,
  ],
  options = { size: 'small', zIndex: 3000 }
//  eslint-disable-next-line
const install = function ins(app: any): void {
  // if (install.installed) { return }
  for (let i = 0; i < components.length; i++) {
    app.component(components[i].name, components[i])
  }
  app.config.globalProperties.$ELEMENT = options
}

const API = {
  install,
}
export default Object.assign(API, components)

在main.ts文件代碼添加如下

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import ElementPlus from '@/core/element'
import 'element-plus/theme-chalk/index.css'



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

17.使用組件預覽在App.vue文件，代碼如下

<template>
  <ElConfigProvider :locale="locale">
    <!-- <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view /> -->
    <el-table :data="list" border style="width: 66%" class="tableel12">
      <el-table-column prop="tradeId" label="序號" width="180" />
      <el-table-column prop="stockHolderId" label="股民id" width="180" />
      <el-table-column prop="bankCardId" label="卡號" />
      <el-table-column prop="addedMoney" label="交易金額" />
      <el-table-column prop="state" label="狀態(tài)" />
      <el-table-column prop="type" label="操作股票方式" />
      <el-table-column label="重傳">
        <template #default="scope">
          <el-button type="primary" @click="update2(scope.row.tradeId, scope.row.state)">重傳</el-button>
          <!-- <el-button link type="primary" size="small">Edit</el-button> -->
        </template>
      </el-table-column>
    </el-table>
  </ElConfigProvider>
</template>
<script >
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
import { ref } from 'vue'
export default {
  setup() {
    const locale=ref(zhLocale)
     return {
       locale,
     }
  },
 
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

效果圖如下：

注意點：

1.我的npm版本是8.5.0 ，node版本是16.14.2 ， yarn版本是1.22.18，vue-cli版本是5.0.8，cnpm版本是8.2.0

2.elementUI官網(wǎng)：https://element-plus.gitee.io/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5

3.代碼提交到gitee倉庫：https://gitee.com/henrryhu/vue-element-plus

總結

到此這篇關于搭建vue3項目以及按需引入element-ui框架組件的文章就介紹到這了,更多相關搭建vue3按需引入element-ui組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue項目實現(xiàn)局部全屏完整代碼
最近需要做一個全屏功能,所以這里給大家總結下,這篇文章主要給大家介紹了關于vue項目實現(xiàn)局部全屏的相關資料,需要的朋友可以參考下
2023-09-09
vue中this.$router.go(-1)失效(路由改變了，界面未刷新)
本文主要介紹了vue中this.$router.go(-1)失效(路由改變了,界面未刷新),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2023-12-12
vue v-model的用法解析
這篇文章主要介紹了v-model的基本用法解析，幫助大家更好的理解和學習vue v-model的使用方法，感興趣的朋友可以了解下
2020-10-10
詳解VUE前端按鈕權限控制
這篇文章主要介紹了VUE前端按鈕權限控制，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
詳解Vue之事件處理
這篇文章主要介紹了Vue之事件處理的相關資料，文中示例代碼非常詳細，幫助大家更好的理解和學習，感興趣的朋友可以了解下。
2020-07-07
Vue vxe-table使用問題收錄小結
這篇文章主要為大家介紹了Vue vxe-table使用問題收錄小結,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-09-09
基于Vue實現(xiàn)可選擇不連續(xù)的時間范圍的日期選擇器
這篇文章主要為大家詳細介紹了如何基于Vue.js實現(xiàn)一個可選擇不連續(xù)的時間范圍的日期選擇器，文中的示例代碼簡潔易懂，需要的可以參考一下
2023-06-06
vue項目中實現(xiàn)圖片預覽的公用組件功能
小編接到查看影像的功能需求，根據(jù)需求，多個組件需要用到查看影像的功能，所以考慮做一個公用組件，通過組件傳值的方法將查看影像文件的入?yún)鬟^去。下面小編通過實例代碼給大家分享vue項目中實現(xiàn)圖片預覽的公用組件功能，需要的朋友參考下吧
2018-10-10
vue實現(xiàn)列表固定列滾動
這篇文章主要為大家詳細介紹了vue實現(xiàn)列表固定列滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
React?Diff算法不采用Vue的雙端對比原因詳解
這篇文章主要介紹了React?Diff算法不采用Vue雙端對比算法原因詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07