从零开始搭建自己的VueJS2.0+ElementUI单页面网站（一、环境搭建）

蔚落 2022-05-15 02:08 376阅读 0赞

From: [https://blog.csdn.net/u012907049/article/details/72764151][https_blog.csdn.net_u012907049_article_details_72764151]

# 前言 #

VueJS可以说是近些年来最火的前端框架之一，越来越多的网站开始使用vuejs作为前端框架，vuejs轻量、简单的特性使得前端开发变得更加简易，而基于vuejs的前端组件库也越来越多。我们今天使用的ElementUI，是饿了么团队开发的一款基于vuejs的前端组件库，也是众多vuejs组件库里面比较优秀的一款。这里要说一下我们构建网站所需要用到的一些东西：

*  NodeJS（npm）
 *  Webstorm （前端IDE）
 *  Nginx（后期用来转发请求到后台服务器）
 *  Eclipse（后台IDE）

# 正文 #

## 安装nodeJS和npm ##

由于我们要使用npm这个包管理器，所以要安装nodeJS。现在版本的nodeJS已经集成了npm，所以我们只需要安装一次即可。我们访问[nodejs中文网][nodejs]，下载对应自己系统的版本就可以了。这里我们下载Windows系统的64位zip文件，下载完成后解压，可以看到里面有一个node.exe的可执行文件。

![这里写图片描述][SouthEast]

我们把当前的目录加入到系统环境变量的path里面。然后打开cmd命令行，输入npm -v，如果出现如下图的显示，说明已经安装正确。

![npm][]

这样我们以后就可以在硬盘中任何一个位置里使用npm命令了。

## 安装Webstorm ##

Webstorm是一款专门用于前端开发的IDE，在其最新的版本中已经有了对vuejs的语法支持。我们进入[Webstorm的官方网站][Webstorm]下载webstorm的最新版本，安装之后，会提示我们需要激活，我们按下图中的输入，点击activate就可以了。

![这里写图片描述][SouthEast 1]

激活成功之后进入webstorm，此时我们已经可以进行开发了，不过我们首先要把vue component的模版加入到模版库中，这样以后我们每次新建一个.vue后缀的文件，都不需要先手动添加一些默认的代码。点击左上角File->New->Edit File Templates，在弹出的对话框中点击左上角的绿色加号，然后按照如图显示填写Name和Extension，

![这里写图片描述][SouthEast 2]

在下方橙色区域的代码段内填写

<template>
        <div>
        </div>
    </template>
    <script type="text/ecmascript-6">
        export default {
            data(){
                return {
    
                }
            }
        }
    </script>

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14

然后点击apply，再点击ok即可。现在我们再次点击左上角File->New，可以看到刚才创建的vue template已经出现了。我们点击vue template，名称填写test，可以看到新创建的文件就是刚才我们创建的模版的样子，如图。

![这里写图片描述][SouthEast 3]

我们可以看到这个模版里面使用的ES6的写法，而我们当前的IDE默认支持的是ES5，这里我们点击左上角File->Settings，然后下图设置:

![这里写图片描述][SouthEast 4]

然后点击apply即可。

## 创建ElementUI工程 ##

目前ES5仍属于主流写法，而我们要使用ES6，需要用到babel来将ES6的语法转换回ES5的写法，然后用webpack进行打包等等一些列操作。不过我们不需要自己去配置这些东西，如果是普通的vuejs工程，我们可以使用一个叫做vue-cli的脚手架工具生成vuejs工程，而我们现在使用的是vuejs+ElementUI，所以我们可以从ElementUI的官网里找到通用的项目模版。地址在[ElementUI的GitHub][ElementUI_GitHub]，我们只要下载这个工程即可。下载解压之后，在webstorm中点击File->Open，打开刚才下载的工程。打开之后可以看到工程结构如下图：

![这里写图片描述][SouthEast 5]

可以看到里面已经集成了bable、webpack等插件。不需要我们自己去配置。我们导入这个工程之后，需要做的一件事就是将npm模块安装到这个目录下。我们打开命令行，进入当前工程的根目录，然后输入

npm install

*  1

如果安装速度较慢，可以使用npm依赖包在国内由阿里云提供的镜像，如下所示

npm install --registry=http://registry.npm.taobao.org

*  1

点击回车。

安装结束后我们可以看到工程目录下多了一个node\_modules的文件夹，该文件夹就是工程的依赖包所在。以后我们如果想添加依赖包，就可以继续用上文的指令，例如如果想加入vue-router，那么需要输入

npm install vue-router --save

*  1

npm会自动寻找最新版本的依赖包进行安装。

## 工程打包运行 ##

安装好依赖之后，我们可以对工程进行打包和运行。我们仍然是使用命令行，进入当前工程的目录，并输入

npm run dev

*  1

这段代码的意思就是以本地服务器的端口启动这个工程。关于本地服务器的配置信息，在工程根目录的webpack.config.js中，我们可以在该文件中看到如下代码段：

devServer: {
        host: '127.0.0.1',
        port: 8010,
        proxy: {
          '/api/': {
            target: 'http://127.0.0.1:8080',
            changeOrigin: true,
            pathRewrite: {
              '^/api': ''
            }
          }
        },

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12

这里的配置信息写的很清楚，本地的服务器端口为8010，如果我们想改变端口号或主机名，只要改变这里对应的字段即可。  
我们输入npm run dev后，会出现一长串信息，最后会出现webpack: Compiled successfully的字样，代表我们的代码编译成功。这时我们打开浏览器，输入localhost:8010，出现如图所示的网页，表示我们的第一个Vuejs2.0 ＋ElementUI工程已经成功运行。

![这里写图片描述][SouthEast 6]  
  
点击图中的Let’s do it按钮，可以看到右侧有一个提醒消息飘出来，这就是ElementUI中的一个组件。

![这里写图片描述][SouthEast 7]

至此一个简单的基于VueJs2.0和ElementUI的前端网站的雏形已经完成了，接下来的时间我会慢慢介绍构建单页面应用的更多方法和细节。

# 小结 #

Webstorm对于前端语言的支持非常丰富，在2017.1版本之后也更新了对vuejs语法的高亮显示的支持。另外，相对于Eclipse等后端IDE，Webstorm不需要在每次写完代码后手动保存，所有的保存都是实时进行的。对于需要同时开发前端和后端的工程师来说，这是需要注意的一点，如果习惯了webstorm的实时保存，可能会在修改了后端代码后忘记保存。  
还有一点就是npm run dev是热加载，我们执行了这条命令后在webstorm里修改前端代码，响应的变化就会马上显示在前端页面，这也是很方便的一点。  
另外就是关于ES6的问题，ES6是今后的主流，并且自带模块化语句import和export，这对于vuejs的组件化开发是非常有帮助的，而组件化开发会很大程度上提高编程和代码管理的效率。这个系列的文章都会以ES6的写法进行开发。如果你想了解vuejs和ElementUI在ES5的编程方法，可以看我的另一篇博客  
[Vue2.0+ElementUI+PageHelper实现的表格分页][Vue2.0_ElementUI_PageHelper]  
这篇文章里介绍了ES5写法下的vue2.0和ElementUI，以及基于它们的前端增删改查的基本操作和后端pageHelper物理分页的方法。

[https_blog.csdn.net_u012907049_article_details_72764151]: https://blog.csdn.net/u012907049/article/details/72764151
[nodejs]: http://nodejs.cn/download/
[SouthEast]: /images/20220515/b6c4cce3b99d4445b34c85a3029ab257.png
[npm]: /images/20220515/99af1dea3e9e472588941cbe9952ad89.png
[Webstorm]: http://www.jetbrains.com/webstorm/
[SouthEast 1]: /images/20220515/775c27fe32534133b93ae831fbed60cb.png
[SouthEast 2]: /images/20220515/f860d670d61d4444b5b3077f030f8f83.png
[SouthEast 3]: /images/20220515/dd137d5a4fcb4bfeb5eef1ebd71ed6e3.png
[SouthEast 4]: /images/20220515/cafcdc7eca3543d9a622c04513765a68.png
[ElementUI_GitHub]: https://github.com/ElementUI/element-starter
[SouthEast 5]: /images/20220515/f3bce3219c924a3db734a74863e92a59.png
[SouthEast 6]: /images/20220515/5ff0590c74ed453a9e441010f7e366a4.png
[SouthEast 7]: /images/20220515/2ea3ab36e5ae4fd0af815fb9abf64644.png
[Vue2.0_ElementUI_PageHelper]: http://blog.csdn.net/u012907049/article/details/70237457