elementUI基本使用

@Tomato
ElementUI
目录
文章目录
需求配置
Eslint
上传文件
接口转发
mock

需求配置
需求：vsCode、 node.js、Vue cli、 前端UI ElementUI
参考网址

ElementUI起步、

ElementUI组件、

VueCli

装好node.js
设置淘宝仓库

npm install --registry=https://registry.npm.taobao.org
安装依赖

npm install
启动项目

npm run serve

注

rum 的可能server也可能是dev ，具体查看package.json --》“serve”: “vue-cli-service serve”,
.env.development 和 vue.config.js文件的Proxy节点对应配比开发接口路径





Eslint
虽然Angular项目和Vue项目都需要安装Eslint插件
但是在vue项目上面Eslint并没有那么Angular那个优秀
所以安装插件Prettier - Code formatter格式化代码就不会Eslint的Warring
发布之前：
npm run lint   --检查所有的Eslint的格式化问题
npm run lint:fix    --修复大部分的Eslint的格式化问题
注：
提上来的代码不要有warning和error

但是no-console、no-debugger 都不开启检测

发布前把这些打开，跑lint检测,解决这些问题后再build发布
“off” or 0 - 关闭(禁用)规则
“warn” or 1 - 将规则视为一个警告（并不会导致检查不通过）
“error” or 2 - 将规则视为一个错误 (退出码为1，检查不通过)



上传文件
页面.ts  UI
<el-form-item label="文件">
          <el-upload
            ref="upload"
            action=""
            :auto-upload="false"
            :show-file-list="false"
            :multiple="false"
            :file-list="file"
            :limit="1"
            :on-change="onChangeFile"
            :http-request="onUploadFile"
          >
            <el-button v-if="!isSelectFlie" slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button v-else size="small" type="primary" @click="onResetSelectFile">选取文件</el-button>
            <el-tag v-if="showfileName!==''" type="info" style="margin-left: 10px;cursor: pointer;" @click="onDownload">{{ showfileName }}</el-tag>
          </el-upload>
</el-form-item>

页面.ts  Vue
接口转发
vue.config.js文件的Proxy节点
mock

引入element工具包




使用其菜单栏示例



可以使用提供的属性




html文件内容


页面效果以翻译成的html语言

elementui的使用
以下操作都是在控制台
npm install -g @vuecli-init
创建一个项目 名字是elementui-one

vue init webpack elementui-one
进入自己创建的项目

cd elementui-one
安装elementui

npm install element-ui -S
运行

npm run dev
就可以 直接访问了

Your application is running here: http://localhost:8080