如何快速搭建一个完整的vue2+element-ui的项目

最新推荐文章于 2024-05-24 11:45:48 发布

月下星辰

最新推荐文章于 2024-05-24 11:45:48 发布

阅读量1.9k

点赞数 24

分类专栏： vue vue技术文章标签： vue.js javascript vue js

本文链接：https://blog.csdn.net/qq_33449702/article/details/136873976

版权

vue 同时被 2 个专栏收录

9 篇文章 1 订阅

订阅专栏

vue技术

6 篇文章 1 订阅

订阅专栏

今天因之前的项目完成,开始新项目,刚好前端只有我一个人,然后被安排搭建一个项目框架,技术点: vue2 + element-ui

文章目录

概要

提示：今天是计划开发一款电力管理系统,开发周期为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为@:

找到项目根目录: 新建vue.config.js文件

里面的代码为:

const path = require("path")
module.exports = {
 configureWebpack: {
        resolve: {
            alias: {
                '@': path.resolve(__dirname, 'src')
            }
        }
    },
}

当你复制代码到你的vue.config.js中的时候,如果报错,这个就是elinst的作用,不用管即可