基于VUE开发项目

前言

技术选型

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:\workCode\scaffold
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:\Users\Administrator\AppData\Local\Temp\phantomjs\phantomjs-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[/code] 
1

2

3

4

5

6

7

8

9

10

11

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

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

npm run dev


1

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