基于VUE开发项目

前言

最近由于公司需要，需要写一个相对来说比较大型的后台管理系统。为了保证管理系统操作体验较为舒适并且项目后期益于维护，最后决定基于VUE全家桶来开发一个高度组件化的单页SPA应用。

技术选型

• vue：进行数据绑定以及开发组件

• vue-router： 处理页面路由

• vuex： 处理各组件间的通讯

• vue-resource：处理HTTP请求

• element-ui：使用UI框架中部分UI组件进行快速开发

项目创建

首先我们需要保证自己电脑安装有Node运行环境

打开命令行工具，输入下面指令进行全局安装vue-cli

npm i vue-cli -g --verbose

• 1

提示：NPM站点虽然说在国内没有被墙，但是使用NPM安装第三方依赖包的时候仍然速度慢的经常让人抓狂，这里我们可以通过使用淘宝镜像来提高我们的下载速度，具体方法可以参考我以前写的这篇文章：如何提高NPM拉取第三方依赖包的速度

vue-cli安装完毕之后，输入下面指令初始化我们的项目。例如我们需要在D盘WorkCode文件夹下创建一个名为scaffold的项目

 cd D:workCode
 vue init webpack scaffold 

• 1
• 2

这时会需要我们填写一些项目基础信息，在这里我们可以不用管它，只要一路按Enter键就可以了。下面是我们创建好的项目文件目录

项目创建完成之后cd到我们创建好的项目文件根目录下,安装项目所需要的各种第三方依赖包

cd D:workCodescaffold
npm i  --verbose

• 1
• 2

由于需要安装的依赖比较多，所以安装时间可以稍微有点长，耐心等待下就好。如果中途安装失败，报错内容如下的话：

出现这中情况是或许因为文件phantomjs-2.1.1-windows.zip过大，同时网络不是特别好的原因导致文件下载失败，其实解决办法很简单，就是复制下载路径并且粘贴到浏览器中，通过浏览器下载文件，具体情况如下：

PhantomJS not found on PATH
Downloading https://github.com/Medium/phantomjs/releases/download/v2.1.1/phantomjs-2.1.1-windows.zip//这里的路径就是文件的下载路径
Saving to C:UsersAdministratorAppDataLocalTempphantomjsphantomjs-2.1.1-windows.zip//下载好的文件放到上面这个指定的目录下面
Receiving...
  [----------------------------------------] 0%
Error making request.
Error: read ECONNRESET
    at exports._errnoException (util.js:1026:11)
    at TLSWrap.onread (net.js:569:26)

Please report this full log at https://github.com/Medium/phantomjs

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

文件通过浏览器下载完毕并且放到指定文件夹之后再次执行npm i --verbose就可以完美解决问题了。

三方依赖晚装完毕之后在命令行工具中执行下面指令启动项目：

npm run dev

• 1

如果浏览器中打开下面这种页面时，就说明我们的第一步创建初始项目的任务就完成了。