Vue中使用Element-ui快速搭建网页

网友投稿 1571 2022-05-28

Vue中使用Element-ui快速搭建网页

最近写了一个简单的邮件统计页面,一个列表、一个比较详细的页面。

由于页面比较简单,其实使用bootstrap、jquery、Awesome就可以完成了。只是页面上对邮件分类查看、筛选的事件比较多;当form中的select、input等值发生改变的时候,就需要重新从后台获取数据,感觉这样的功能需求,使用vue就会方便很多。于是就打算使用vue写一份。

第一步:使用vue-cli快速创建项目

在想要放置项目根目录的地方打开cmd

快捷方式:

打开到目录,然后在路径处输入cmd,然后enter(回车),就可以打开处于这个位置的小黑屏了。

2. 在命令行输入命令:  xiaoman 是项目名称,也会是根目录文件夹名

vue create xiaoman

接下来会让你根据需要,选择需要的包、要使用的配置等、

我是选择了手动配置,即:Manually select features

然后选择需要的:

使用history路由模式,没有使用hash的方式方便,去网上搜索了一下,history会有很多坑!?

history模式注意事项:

这种模式需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问对应的URL时 就会返回 404,这就不好看了。

额…我是没有使用过history模式的,都是用hash模式。

最后是问你是否保存一个项目预设,以后就不用一个一个选择了。我是没有保存过…

然后回车,会自动下载安装包了,

3. 下载完成后

可以使用命令行cd xx 进入文件夹,然后运行 npm run serve 启动项目,

在run serve之前可以打开项目根目录下的  package.json ,在“serve”字段后面加上 --open

这样在项目npm run serve成功之后,会自动打开默认浏览器打开项目,方便很多。

也可以在进入文件夹后 运行 vue ui 打开vue项目管理盘

点击项目管理盘上的运行按钮,就会启动npm run serve,若没有报错,就可以点击对号上方的启动app按钮打开项目。

第二步:准备文件、路由结构、引入element-ui

删除或直接修改项目不需要的组件、路由

脚手架创建的项目里,home.vue、Helloworld这些不需要的组件删除或者直接修改成自己需要的组件,记得还要去修改路由、以及路由对应的组件。

组件建议都使用懒加载的方式,可以加快页面加载速度。

创建好自己需要的组件、路由之后,看下页面是否报错,试一下路由是否对应正确。

安装 组件库

使用 npm i element-ui -s

然后根据项目需要使用的组件数量决定,是引入整个 Element,或是根据需要仅引入部分组件。

---如果需要使用的组件很多,可以引入整个Element。

整个引入在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);   即可使用所有的组件。

---使用个别组件,就按需引入组件,可以减小项目体积,但是一个一个引入,较麻烦一些。

借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。

首先,安装 babel-plugin-component:

npm install babel-plugin-component -D

然后将 .babelrc 修改为:

(如果按照element-ui官网给的设置,我的项目会报错,不晓得为啥…可能是版本问题?)

3. 使用组件

在element官网的组件中找到需要使用的组件,在main.js中引入、注册就可以使用了。

在main.js 中写入:

组件中:

从官网上复制下来的代码,修改为自己需要的即可

注意在 data中定义需要的数据、在methods中定义需要的函数。

如果还有其他的需求,可以去查看组件提供的Attributes、Options、Events、Methods,通常就可以满足需求了。

但是使用element-ui组件,修改样式很困难…

还有一个组件可能要引入多个元素,这样就不能放在main.js里面,再新建一个element.js

注意里面要引入vue

然后在main.js中引入element.js即可。

Vue

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Anaconda-一个开源的Python发行版本
下一篇:Kafka实战(六) - 核心API及适用场景全面解析
相关文章