日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

之前進(jìn)入公司都是有成型的vue項(xiàng)目進(jìn)行二次開發(fā)，所以對(duì)如何創(chuàng)建vue項(xiàng)目并不了解。最近開發(fā)新項(xiàng)目，前端選擇elementui來(lái)進(jìn)行開發(fā)，有幸自己完整搭建項(xiàng)目，所以和大家分享一下搭建過(guò)程，一起在vue中乘風(fēng)破浪。

1.我們需要?jiǎng)?chuàng)建vue項(xiàng)目。第一步需要安裝node.js。可通過(guò)訪問(wèn)https://nodejs.org/zh-cn/進(jìn)行下載，安裝成功后可通過(guò)運(yùn)行命令行 node-v進(jìn)行查看是否安裝成功。如下圖所示 。

2.接下來(lái)我們需要全局安裝vue-cli，需要注意的是vue-cli對(duì)node.js版本是一定的要求。

可以通過(guò)運(yùn)行如下命令進(jìn)行vue-cli的安裝（因vue-cli為國(guó)外鏡像，下載較慢，可通過(guò)更換淘寶源進(jìn)行安裝，運(yùn)行命令如第1行所示）。安裝完成后可運(yùn)行第三行命令來(lái)檢查是否安裝成功。

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g @vue/cli
vue -V

接下來(lái)到我們重磅環(huán)節(jié)，創(chuàng)建vue項(xiàng)目。首先以管理員身份運(yùn)行cmd命令行窗口，進(jìn)入任意一個(gè)想創(chuàng)建項(xiàng)目的文件夾，運(yùn)行 vue create demo01 命令后，如下圖所示。

可自由選擇vue3還是vue2版本，或者也可以進(jìn)行自定義配置。（我選擇vue 3版本進(jìn)行安裝，選中后回車進(jìn)行安裝，安裝完成后則顯現(xiàn)如下圖所示界面）

根據(jù)提示命令進(jìn)行運(yùn)行，出現(xiàn)如下界面，代表我們安裝完成。

我們?cè)L問(wèn)localhost:8080后，出現(xiàn)項(xiàng)目界面。

至此我們vue項(xiàng)目已安裝成功，接下來(lái)我們安裝elementui。我們可以通過(guò)運(yùn)行如下命令進(jìn)行安裝。（element-plus為element3，支持手機(jī)端展示）

npm install element-plus –-save

接下來(lái)我們需要通過(guò)編輯器打開項(xiàng)目，來(lái)引入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頁(yè)面，將內(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)運(yùn)行npm run serve命令，打開項(xiàng)目頁(yè)面，如下圖所示。

至此安裝elementui的流程就到此結(jié)束，請(qǐng)愉快地在vue雙向綁定的世界中沖浪吧。