vue脚手架使用webpack打包(vue脚手架使用教程)

关于元素UI
Element UI是以Vue 2.0为基础框架实现的一套组件库，是面向开发者、设计师、产品经理的一套基于Vue 2.0的组件库。它提供支持性的设计资源，帮助网站快速成型。
Element UI的官网是：https://element.eleme.cn/
元素UI预定义了几乎所有标签的通用设计风格。大多数情况下，不需要考虑宽度、高度、背景色、文字大小、文字颜色等样式规则。的按钮，直接用就行了，比如Element UI提供的按钮：
按钮
当然，除了按钮之外，Element UI对于表格、表单、表单中的控件、弹出框等常见的页面元素都设计了非常简洁美观的样式。比如：
菜单
元素之所以被称为“组件库”，是因为它不再使用传统的HTML标签，而是自行定制一系列标签(包括标签属性)。以buttons为例，其源代码大致如下：
除了按钮的样式之外，元素UI还提供了一种验证表单控件的便捷方式，例如：
测试和验证
由于Element UI定义了大量的组件，每个组件都有很多属性，学习Element UI需要记忆大量的组件特性，这将是一个非常漫长的过程。通常不建议死记硬背。我们要把重点放在Element UI能做什么，比如它有什么风格，每个组件的核心属性的用法，然后结合官方文档(https://Element . eleme . CN/#/zh-CN/component/)进行开发。
安装元素用户界面
首先进入项目文件夹(如果这个项目是用IntelliJ IDEA打开的，只需点击IntelliJ IDEA下的终端)://我的项目放在这个位置，可以根据自己的项目进入项目CD d :/vue-workspace/vue-project-02然后使用npm命令安装Element UI。下面两个命令是等价的(注意：下面的命令是区分大小写的，比如-S的最后一个字母是大写的)//推荐第一个安装命令npm i element-ui -S//或者下面的写法npm install – save element-ui。安装完成后，导入并使用project://main.js文件配置的Element UI://main.js，从’ element-ui ‘添加如下三行import ElementUI导入“element-ui/lib/theme-chalk/index . CSS”；vue . use(element ui)；部署
在页面中显示元素UI组件
1):通过前面的学习，你应该知道有些文件在这个项目中是不需要保留的，你应该删除这些文件，比如：
删除router/index.js中不必要的配置，从’中删除导入主页视图’./views/homeview.vue ‘
删除routes常量中的每个对象(只是一个空数组)
Delete src/components/hello world . vueDelete src/views/home view . vueDelete src/views/about view . vue 2):如果你认为这些页面元素占据了100%的宽度，并且默认靠左对齐(当它们占据100%的宽度时你可能无法分辨)，这样的显示效果不够美观，你可以
//利用自己掌握的CSS样式进行调整，例如：
//了解更多关于元素UI的实践，比如：
登录到设计视图演示，使用以下代码修改APP.vue页面：
用户登录提交重置
学习记录，如有侵权，请联系删除。