企业邮件系统搭建的关键要素与效率提升策略探讨
1525
2022-05-28
最近写了一个简单的邮件统计页面,一个列表、一个比较详细的页面。
由于页面比较简单,其实使用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小时内删除侵权内容。