Vue|[Vue】Vue项目的创建以及饿了么UI的使用


创建一个Vue项目(环境已经安装好) 注:为了方便自己,因为没记住。但是很简单()
1、cd /d 进入自己要创建项目的文件位置 Vue|[Vue】Vue项目的创建以及饿了么UI的使用
文章图片

2、 输入 vue create "项目名" ,回车 Vue|[Vue】Vue项目的创建以及饿了么UI的使用
文章图片

根据自己的情况选择
1、vue3自动安装
2、vue2自动安装
3、手动安装
这里我选择的是2
Vue|[Vue】Vue项目的创建以及饿了么UI的使用
文章图片

3、创建成功 Vue|[Vue】Vue项目的创建以及饿了么UI的使用
文章图片

4、依次输入上图蓝色部分的两行代码 (这里大意了,输错了一次,)
Vue|[Vue】Vue项目的创建以及饿了么UI的使用
文章图片

继续输入npm run serve ,回车
Vue|[Vue】Vue项目的创建以及饿了么UI的使用
文章图片

创建成功

饿了么ui的使用 地址:Element - The world's most popular Vue UI framework
1、安装 npm i element-ui -S Vue|[Vue】Vue项目的创建以及饿了么UI的使用
文章图片

这里面有,说明下载成功了
Vue|[Vue】Vue项目的创建以及饿了么UI的使用
文章图片

2、引入elemet ui 第一种,完整引入(完整引入的缺点是太大了,其实好像也没大到哪去)
在 main.js 中写入以下内容:

import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); new Vue({ el: '#app', render: h => h(App) });

Vue|[Vue】Vue项目的创建以及饿了么UI的使用
文章图片

然后就可以在饿了么组件里面找自己想要的组件了
Vue|[Vue】Vue项目的创建以及饿了么UI的使用
文章图片

如我选择组件中的Button,我只需要点击显示代码,就能获取相应的代码
Vue|[Vue】Vue项目的创建以及饿了么UI的使用
文章图片

例如:我用一个成功按钮
复制代码

成功按钮

Vue|[Vue】Vue项目的创建以及饿了么UI的使用
文章图片

一直划到底部,是这个组件的属性
Vue|[Vue】Vue项目的创建以及饿了么UI的使用
文章图片

例如,给这个按钮加一个图标
Vue|[Vue】Vue项目的创建以及饿了么UI的使用
文章图片

找到图片,复制代码。
我找的是这个
el-icon-user-solid

加在按钮上,就有了如下效果
Vue|[Vue】Vue项目的创建以及饿了么UI的使用
文章图片

Vue|[Vue】Vue项目的创建以及饿了么UI的使用
文章图片


第二种:部分引入:引入我需要的组件 1、安装 babel-plugin-componen
npm install babel-plugin-component -D

2、将 .babelrc 修改为:
{ presets: [["es2015", { "modules": false }]], plugins: [ [ "component", { libraryName: "element-ui", styleLibraryName: "theme-chalk" } ] ] }

3、引入自己需要的组件
import Vue from 'vue'; import { Button, Select } from 'element-ui'; import App from './App.vue'; Vue.component(Button.name, Button); Vue.component(Select.name, Select); /* 或写为 * Vue.use(Button) * Vue.use(Select) */new Vue({ el: '#app', render: h => h(App) });

完整引入,请看官网 传送门
其中,这些要这样注册
Vue.prototype.$loading = Loading.service; Vue.prototype.$msgbox = MessageBox; Vue.prototype.$alert = MessageBox.alert; Vue.prototype.$confirm = MessageBox.confirm; Vue.prototype.$prompt = MessageBox.prompt; Vue.prototype.$notify = Notification; Vue.prototype.$message = Message;


不装了,我摊牌了。这些知识点,饿了么ui官网都有,而且比我写的好。 【Vue|[Vue】Vue项目的创建以及饿了么UI的使用】(我就想水点经验(bushi),为了加强自己的记忆)

    推荐阅读