之前進(jìn)入公司都是有成型的vue項目進(jìn)行二次開發(fā)，所以對如何創(chuàng)建vue項目并不了解。最近開發(fā)新項目，前端選擇elementui來進(jìn)行開發(fā)，有幸自己完整搭建項目，所以和大家分享一下搭建過程，一起在vue中乘風(fēng)破浪。
1.我們需要創(chuàng)建vue項目。第一步需要安裝node.js。可通過訪問https://nodejs.org/zh-cn/進(jìn)行下載，安裝成功后可通過運行命令行 node-v進(jìn)行查看是否安裝成功。如下圖所示 。
2.接下來我們需要全局安裝vue-cli，需要注意的是vue-cli對node.js版本是一定的要求。
可以通過運行如下命令進(jìn)行vue-cli的安裝（因vue-cli為國外鏡像，下載較慢，可通過更換淘寶源進(jìn)行安裝，運行命令如第1行所示）。安裝完成后可運行第三行命令來檢查是否安裝成功。
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g @vue/cli
vue -V
接下來到我們重磅環(huán)節(jié)，創(chuàng)建vue項目。首先以管理員身份運行cmd命令行窗口，進(jìn)入任意一個想創(chuàng)建項目的文件夾，運行 vue create demo01 命令后，如下圖所示。
可自由選擇vue3還是vue2版本，或者也可以進(jìn)行自定義配置。（我選擇vue 3版本進(jìn)行安裝，選中后回車進(jìn)行安裝，安裝完成后則顯現(xiàn)如下圖所示界面）
根據(jù)提示命令進(jìn)行運行，出現(xiàn)如下界面，代表我們安裝完成。
我們訪問localhost:8080后，出現(xiàn)項目界面。
至此我們vue項目已安裝成功，接下來我們安裝elementui。我們可以通過運行如下命令進(jìn)行安裝。（element-plus為element3，支持手機端展示）
npm install element-plus –-save
接下來我們需要通過編輯器打開項目，來引入element。
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus' //需要引入的部分1
import 'element-plus/dist/index.css' //需要引入的部分2
createApp(App).use(ElementPlus) //需要引入的部分3
createApp(App).mount('#app')
打開HelloWorld頁面，將內(nèi)容改為如下代碼。
<template>
<div class='swt'>
<el-switch
v-model="value"
size="large"
active-text="Open"
inactive-text="Close"
/>
<br />
<el-switch v-model="value"
active-text="Open" inactive-text=
"Close" />
<br />
<el-switch
v-model="value"
size="small"
active-text="Open"
inactive-text="Close"
/>
</div>
</template>
<script>
import { ElSwitch } from 'element-plus'
export default {
name: 'MySwich',
data(){
return{
value:true,
}
},
components: { ElSwitch },
}
</script>
<style scoped>
.swt{
text-align: center;
}
</style>
在編輯器內(nèi)運行npm run serve命令，打開項目頁面，如下圖所示。
至此安裝elementui的流程就到此結(jié)束，請愉快地在vue雙向綁定的世界中沖浪吧。
