場景：使用vue create腳手架快速搭建vue的項目
前提：需要安裝node.js和cnpm以及yarn
并且cnpm需要設(shè)置為淘寶鏡像，cnpm和yarn安裝教程網(wǎng)上很多可以自行搜索
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)頁應(yīng)用程序
( ) Router // vue路由
( ) Vuex // 狀態(tài)管理模式
( ) CSS Pre-processors // css預(yù)處理
( ) Linter / Formatter // 代碼風(fēng)格、格式校驗
( ) Unit Testing // 單元測試
( ) E2E Testing // 端對端測試
4.選擇vue的版本
我這里選擇第一個3.X,然后回車
5.選擇class風(fēng)格的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ā)頁面跳轉(zhuǎn)，即前進后退，但不會重新加載頁面。
3.hash傳參是基于url，如果要傳遞復(fù)雜的參數(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.是否保存本次配置為預(yù)設(shè)項目模板
我這里選擇N(也可以選擇Y，這樣下次可以直接使用該配置方案快速搭建項目)，然后回車，則項目搭建成功
12.搭建成功的示例
13.打開項目安裝依賴
在終端輸入如下代碼，安裝依賴包
yarn install
14.啟動項目
在終端輸入如下代碼，然后回車啟動項目
yarn serve
放在瀏覽器預(yù)覽
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.使用組件預(yù)覽
在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文章來源：http://www.zghlxwxcb.cn/news/detail-565688.html
3.代碼提交到gitee倉庫：https://gitee.com/henrryhu/vue-element-plus文章來源地址http://www.zghlxwxcb.cn/news/detail-565688.html
到了這里，關(guān)于搭建vue3項目+按需引入element-ui框架組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
