前端Vue框架搭建

1.前言

对于后端开发工作者来说，比较为难的一定是前端部分，除了有专门负责前端开发的大公司，其余的小公司基本上都是前后端都要自己写的。以前对后端开发者比较友好的Layui框架作者也不维护了，我在第一年工作的时候就是用的Layui，但是对于前端的了解也只是停留在CV阶段。最近我们公司在重做之前的一版系统，前端使用的是Vue框架，搭配的是Element-ui组件。我负责的是后端代码。但是空余时间也大致看了一下前端Vue框架的搭建，搭建好之后完全可以当个轮子使用。

1.npm，yarn

这两者的区别对于搞前端的朋友肯定特别熟悉，常年编写后端的朋友们可能比较陌生，之前我在前面写了一个运行命令npm run serve 和yarn run serve只是因为我负责维护的一个项目的前端也是采用了Vue框架，对于运行命令我经常忘记，所以就记录了下来。长话短说，npm和yarn都是JS的包管理工具。

npm缺点在于：

1.下载速度慢

2.安装时无法保持一致性，由于版本号问题，’5.0.3’代表安装固定版本，’~5.0.3’代表安装5.0.X中最新版本，’^5.0.3’代表安装5.X.X中的最新版本

3.所有的包同时安装，有一个包抛出异常，其余包会继续下载，团队开发时有可能会报错

Yarn优点：

1.速度快，体现在两个方面，并行安装和离线模式

2.版本一致

3.输出语句简洁

4.更好的语义化

1.npm的安装教程

2.yarn安装命令：npm install -g yarn

3.安装node.js

查看node.js是否安装，在vscode中打开终端，输入node -v 显示版本号说明安装成功

也可以在cmd上输入node -v来查看node环境是否安装成功，安装成功后npm也会被附属安装，查看方法同样为 npm -v，安装成功后会显示版本号

4.选装cnpm，属于npm（从国外下载，所以速度慢）的替代品

安装命令：npm install -g cnpm –registry=https://registry.npmmirror.com

2.安装Vue-cli脚手架和创建项目

2.1 安装Vue-cli脚手架

安装命令（使用cnpm）：cnpm install -g @vue/cli 查看：vue -V

2.2 创建项目

vue create 项目名称 项目名称不能为大写，否则会报错

当创建完成后，我们就可以看到wms这个项目就在我们根目录下创建完成了。

创建完成后我们可以运行一下，使用命令：npm run serve/yarn run serve 此时会报错，因为我们还在根目录里面，所以使用cd 项目名称 ‘进入到项目，在使用命令运行。

此时我们的项目模板就创建成功了。

3.Element-ui的引用

Element ui（https://element.eleme.cn/#/zh-CN/component/installation）

安装全局依赖，npm i element-ui -S 等同于 npm i element-ui –save-dev，我们怎么判断是否安装完成呢，有两个方法：

安装后需要引入，官方文档上有现成的代码可以抄

到这一步就是引入完成了。我不知道你们走到这一步的时候报不报错，我的是报错了的。

这个报错原因，我也不是很清楚，但是我搜了一下解决方法，很多人说eslint 需要一个配置文件.eslintrc.js，但是我是直接套用的模板，所以解决方法如下：

这样就不报错了。下期见！