element乘风破浪

之前进入公司都是有成型的vue项目进行二次开发，所以对如何创建vue项目并不了解。最近开发新项目，前端选择elementui来进行开发，有幸自己完整搭建项目，所以和大家分享一下搭建过程，一起在vue中乘风破浪。

1.我们需要创建vue项目。第一步需要安装node.js。可通过访问https://nodejs.org/zh-cn/进行下载，安装成功后可通过运行命令行 node-v进行查看是否安装成功。如下图所示 。

2.接下来我们需要全局安装vue-cli，需要注意的是vue-cli对node.js版本是一定的要求。

可以通过运行如下命令进行vue-cli的安装（因vue-cli为国外镜像，下载较慢，可通过更换淘宝源进行安装，运行命令如第1行所示）。安装完成后可运行第三行命令来检查是否安装成功。

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

接下来到我们重磅环节，创建vue项目。首先以管理员身份运行cmd命令行窗口，进入任意一个想创建项目的文件夹，运行 vue create demo01 命令后，如下图所示。

可自由选择vue3还是vue2版本，或者也可以进行自定义配置。（我选择vue 3版本进行安装，选中后回车进行安装，安装完成后则显现如下图所示界面）

根据提示命令进行运行，出现如下界面，代表我们安装完成。

我们访问localhost:8080后，出现项目界面。

至此我们vue项目已安装成功，接下来我们安装elementui。我们可以通过运行如下命令进行安装。（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页面，将内容改为如下代码。

<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>

在编辑器内运行npm run serve命令，打开项目页面，如下图所示。

至此安装elementui的流程就到此结束，请愉快地在vue双向绑定的世界中冲浪吧。