从零开始搭建本身的VueJS2.0+ElementUI单页面网站（1、环境搭建）

原网址：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中文网，下载对应本身系统的版本就能够了。这里咱们下载Windows系统的64位zip文件，下载完成后解压，能够看到里面有一个node.exe的可执行文件。 

 

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

 

 

这样咱们之后就能够在硬盘中任何一个位置里使用npm命令了。

安装Webstorm

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

 

 

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

 

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

<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，能够看到新建立的文件就是刚才咱们建立的模版的样子，如图。 

 

 

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

 

而后点击apply便可。

建立ElementUI工程

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

 

 

能够看到里面已经集成了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工程已经成功运行。 

 

点击图中的Let’s do it按钮，能够看到右侧有一个提醒消息飘出来，这就是ElementUI中的一个组件。 

 

至此一个简单的基于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实现的表格分页 这篇文章里介绍了ES5写法下的vue2.0和ElementUI，以及基于它们的前端增删改查的基本操做和后端pageHelper物理分页的方法。