概要
提示:今天是计划开发一款电力管理系统,开发周期为3-4周.既然时间这么短,说明这个项目还是比较小的,看了一下需求文档,感觉不是很难,个人预计开发时间为1周,剩余的就是交互,调试,测试吧
整体框架
提示:看到电力管理系统,就发现只有pc端,那么就用最熟悉的vue2 + element-ui进行开发即可,无非就是在页面上加点echarts的图标,说干就干
步骤
第一步:
做为一位前端人员,电脑上肯定有node环境,如果没有,那就去官方文档中下载即可:
下载地址:Node.js 中文网, 下载的时候就要注意,你想用几版本的,个人建议不要下载最新版,16版本就行,兼容性比较好, 地址为: Node.js 中文网
第二步:
有了node,那就可以使用npm, 接下来可以安装脚手架:vue-cli 或者 vite,
vue-cli安装步骤(推荐全局安装):
使用win + r 打开命令窗口,输入命名即可;
npm install -g @vue/cli
vite安装步骤(推荐全局安装):
使用win+ r 打开命令窗口,输入命令即可
npm install -g vite
第三步:
我就拿vue-cli进行项目的搭建
1. 第二步完成之后,在电脑的桌面或者其他的盘符新建一个文件夹,这个专门放自己的项目,这个文件夹中英文都可以.
2. 新建文件夹之后,使用点击文件夹目录,删除里面的文字,然后输入cmd,最后回车即可打开命令窗口
3. 打开命令窗口之后,就可以输入: vue create 项目名称(注意这个名称只能为小写,而且不能为中文,不能有空格,可以有短横线)
vue create web-electricity
4. 选择对应的命令, 这个时候键盘的上下键就有作用了, 选中之后按回车即可, 我们使用键盘的上下键移动到最后一个,按回车
5. 开始自己的项目配置,我们需要babel , css , router , vuex , 还有自动化检测规范的工具prettier这个要不要,其实不重要,建议大家勾上,到时候不用也行 ,如何选择了,使用键盘的上下键配合空格键即可
6. 我们使用的vue2 ,直接回车即可
7. router其实就是路由使用什么类型,建议勾上,输入y即可,如果不想用,打不了删除
8. 接下来选择css的预处理器,我一般用less
9. 自动化的测试和规范代码工具,一般用prettier
10. 这个自动化测试 和规范代码何时作用,一般选择保存的时候即可
11. 这个是将配置文件新建一个文件,还是放到package.json中,建议放到package.json中
12. 是否保存为预设, 简单的说就是是否将你搭建项目的过程记录下来,下次就不用下一步,下一步的操作,直接选择即可完成搭建, 我一般使用n
项目搭建完毕:
技术细节-继续配置
提示:你以为这样就完了吗,其实还有很多东西需要我们自己手写的
例如:
- element-ui的配置
- 样式重置配置
- src使用@的配置
- elinst配置
- axios异步请求的二次封转配置
- 语言国际化配置(这个看需求,我这里就不用配置了)
- vuex的配置
- mixins的配置
- 开发环境的配置
继续:
element-ui的配置:
这个非常好配置,就是复制粘贴, 打开官网: Element - The world's most popular Vue UI framework 然后找到安装复制命令,然后到命令窗口:
输入一下命令 : 第一个是进入项目目录 , 第二个是 下载element : npm i element-ui -S
完成之后,找到element-ui的官网
复制代码到,自己的项目main.js中即可,
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
样式重置配置
为何要重置样式了,这个很简单, 我们浏览器不同,导致很多样式不一样,所以我们需要统一样式
找到 src-->assets 然后新建一个目录: base ,这个目录大多数项目都在用,然后新建文件,less或者css都可以
复制一下代码
body, html {
min-height: 100%;
font-size: 16px;
color: #333;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body, ul, div, img, h5, h4, h3, h2, h1, p, span, table, figure, i, em, tt, li {
list-style: none;
margin: 0;
padding: 0;
}
a {
cursor: pointer;
text-decoration: none;
}
i {
font-style: normal;
}
textarea {
font-family: inherit;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.none {
position: absolute;
height: 0;
width: 0;
padding: 0;
margin: 0;
border: none;
}
.cursor-p {
cursor: pointer;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
然后回到main.js导入即可:
import "@/assets/base/base.less"
src使用@的配置
配置src为@:
里面的代码为:
javascript">const path = require("path")
module.exports = {
configureWebpack: {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
}
},
}
当你复制代码到你的vue.config.js中的时候,如果报错,这个就是elinst的作用,不用管即可
elinst配置
因为上边报错了,我们就开始配置elinst 这个到底是什么东西呢,其实他就是问了检验代码的规范,或者单元测试使用,我们实际在开发中,很多人写的代码不一样,所以我们要求代码样式统一,如果只有一个前端大可不要这个文件,如果是多个前端,那就需要了
第一步: 在项目根目录新建.eslintrc.js 和 .eslintignore
.eslintrc.js 配置 规则 这个其实我们在下载项目的时候已经配置完成,无需写任何东西
.eslintignore 忽略哪些文件不要被约束 , 复制一下代码即可
/node_modules/
/dist/
/public/
*.config.js
配置完成之后,将项目关掉,重开一下红色的标记就消失了
小结
由于时间关系,剩余的,下一个文章继续编写