element乘风破浪 _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.orgcnpm install -g @vue/clivue -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'//需要引入的部分1import 'element-plus/dist/index.css'//需要引入的部分2createApp(App).use(ElementPlus)//需要引入的部分3createApp(App).mount('#app')

打开HelloWorld页面，将内容改为如下代码。

<template><div class='swt'><el-switchv-model="value"size="large"active-text="Open"inactive-text="Close"/><br /><el-switch v-model="value"active-text="Open" inactive-text="Close" /><br /><el-switchv-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命令，打开项目页面，如下图所示。