自从用饿了么框架重构项目以来,遇到 很多问题,我都有一一记录下来,现在特喜欢这个框架,说实话,如果你是用了vue这个技术栈的话,一定要用饿了么的pc端框架哦,遇到问题的时候在网上百度一下,就能找到解决方案,还有很多社区可以讨论,社区文档都比较成熟,很容易上手~~
Element UI手册:https://cloud.tencent.com/developer/doc/1270
github地址:https://github.com/ElemeFE/element
vue2.0官方网站:http://caibaojian.com/vue/guide/installation.html
element-ui官方网站:https://element.eleme.cn/#/zh-CN
1:安装node
端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,vue的运行是要依赖于node的npm的管理工具来实现,下载https://nodejs.org/en/,安装完成之后,打开cmd开始输入命令。(我用的是win10系统,所以需要管理员权限,右键点击以管理员身份运行cmd),不然会出现很多报错。
![](http://img.e-com-net.com/image/info10/1d3d134f251e4a6d94da73fc4105b6a6.png)
2:查看node的版本号
下载好node之后,以管理员身份打开cmd管理工具,,输入 node -v ,回车,查看node版本号,出现版本号则说明安装成功。
输入命令: node -v
![](http://img.e-com-net.com/image/info10/c282b3d6806e4901b89201e09bd06680.png)
3:安装淘宝npm镜像
由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue.
淘宝的cnpm命令管理工具可以代替默认的npm管理工具。
输入命令:npm install -g cnpm --registry=https://registry.npm.taobao.org
![](http://img.e-com-net.com/image/info10/6b27776880fb40ddb4886e6b36ef6d54.png)
4:安装全局vue-cli脚手架
淘宝镜像安装成功之后,我们就可以全局vue-cli脚手架,输入命令:cnpm install --global vue-cli 回车;验证是否安装成功,在命令输入vue,出来vue的信息,及说明安装成功;
输入命令:cnpm install --global vue-cli
![](http://img.e-com-net.com/image/info10/b3471f7d5e124a5d8168c498143e87cd.png)
5:建一个新项目
搭建完手脚架之后,我们要开始建一个新项目,这个时候我建议,尽量不要装在C盘,因为vue下载下来的文件比较大,如果要改盘的话,直接输入D:回车就可以直接改盘
输入命令:vue init webpack my-project-first
回车,my-project-first是我自己的文件夹的名字,是基于webpack的项目,输入之后就一直回车,直到出现是否要安装vue-route,
这个我们在项目要用到,所以就输入y 回车
![](http://img.e-com-net.com/image/info10/65556c968c7040b7b9e48f81755dd204.png)
6:注意
下面会出现是否需要js语法检测,这个我们暂时用不到,就可以直接输入no,后面的都可以直接输入no,都是我们暂时用不到的
![](http://img.e-com-net.com/image/info10/a0924783f1f34b43a6a0cf4f800de9ed.png)
创建完成之后的提示:
![](http://img.e-com-net.com/image/info10/90a32661a342447ba166d91e562c5fb3.png)
打开D盘查看一下,会发现多了一个刚刚创建的文件夹
![](http://img.e-com-net.com/image/info10/4e353fbf113c4726836f7c97e683c7db.png)
7:进入项目文件夹
文件夹已经下载好了,现在就可以进入文件夹,输入: cd my-project-first 回车进入新建的项目。
输入命令:cd my-project-first
8:在项目里安装依赖
因为各个模板之间都是相互依赖的,所以现在我们要安装依赖,在项目里输入以下命令。
输入命令:cnpm install
![](http://img.e-com-net.com/image/info10/ca863566b94f48d685ffc1aa0bcebd97.png)
9:运行
一切环境依赖安装准备就绪,我们来测试一下自己新建的vue项目的运行情况,输入命令:cnpm run dev直接回车。会弹出一个浏览器访问地址默认为localhost:8080。(我将地址修改为8081进行访问)
输入命令:cnpm run dev
![](http://img.e-com-net.com/image/info10/d71fbd40ca834cc692d4ee6d5c6ee0d5.png)
10:在浏览器输入localhost:8081
8080是默认的端口,要访问的话,直接在浏览器输入localhost:8080就可以打开默认的模板了;(我的电脑上8080端口有需要,被另外一个项目占用,故而使用8081的端口)
在浏览器输入localhost:8081,显示如下,到此为止,vue开发环境搭建完毕。
![](http://img.e-com-net.com/image/info10/8986addd8f6f4cc984f6b0e31795c409.jpg)
到这一步为止,可以在浏览器里面访问项目了
我现在要做的是把项目托管在github,电脑没有开服务的时候也可以访问
暂时没有买服务器
ctrl+c退出运行项目
![](http://img.e-com-net.com/image/info10/8b3ba7ad9b5b4ade9d266be7c513c77a.png)
1:使用npm run build进行打包
打包完成显示
![](http://img.e-com-net.com/image/info10/aeed678aaef4491c9503b7432df2c77a.png)
这个时候可以看到项目里面多了一个dist文件夹
![](http://img.e-com-net.com/image/info10/e797ef6ab4e14c24b0d4b346410de28b.png)
2:打开dist/下的index.html
但是所有的js,css,img等路径有问题是指向根目录的,
修改config/index.js里的assetsPublicPath的字段,初始项目是/,现在改为./
![](http://img.e-com-net.com/image/info10/be0dfbc7ebce4deb852ef7c5f8948344.png)
![](http://img.e-com-net.com/image/info10/765ecf02cc50449d901cb5c5285c085c.png)
打开dist底下的index.html文件,修改文件路径
![](http://img.e-com-net.com/image/info10/76be3fb87c874fc3914cac71c4bafe70.jpg)
通过浏览器打开,可以访问
![](http://img.e-com-net.com/image/info10/6187f433b3b849a8af0f015dbcc3d3c8.jpg)
3:新建一个仓库,将项目上传到github的仓库
这里的步骤就不多说了,不会可以查看
本地demo上传至github五步曲
https://www.jianshu.com/p/40f48a007c50
完成之后
注意:这里vue为了节约上传文件的大小,会将dist文件给禁止上传了;所以要找到找到vue根目录下的.gitignore,打开文件删除掉 /dist/ 。
![](http://img.e-com-net.com/image/info10/544b991db03949b2ace4249c39ae78a8.png)
这样上传,才会有dist文件可供访问:
![](http://img.e-com-net.com/image/info10/9795bcd429ca481682263d6b39c4b228.jpg)
4:在github上面的项目生成一个网址可以访问
如果不会,可以从参考这篇文章
在github上面的项目生成一个网址可以访问
https://www.jianshu.com/p/a3113a6cb575
此项目生成的网网址
![](http://img.e-com-net.com/image/info10/8759d2da815c43b9aecce621ed512e1e.png)
点击进入网址,在网址后面手动输入,dist/index.html
这个时候,我们创建的项目就托管在github上面了
![](http://img.e-com-net.com/image/info10/7bfb4d52693046cca699aa9eb14cbc6c.jpg)
访问链接:https://wangxiaoting666.github.io/my-project-first/dist/index.html#/
也可以去阿里云上,自己买个域名,解析一下,完美
有属于自己的服务器的童鞋可以继续往下进行操作。
在上面的文章里面,自己做了一个练手的小项目,买了服务器之后,也对linux的命令有了初步的认识和理解,现在开始把做好的项目部署到服务器上,通过域名来访问。
![](http://img.e-com-net.com/image/info10/9066ed98c7d44e1fb90a4b1d46e43061.jpg)
现在开始打包了。
1:使用npm run build进行打包
打包完成显示
![](http://img.e-com-net.com/image/info10/a7e3ac49cf204e66bded50c643f0f5a8.png)
这个时候可以看到项目里面多了一个dist文件夹
![](http://img.e-com-net.com/image/info10/02474baf104e410190dfa15ea9c7593b.png)
2:打开dist/下的index.html
这个时候
直接把dist文件拿出来,在浏览器里面没有办法访问
![](http://img.e-com-net.com/image/info10/8faf2c31f5824534873f6f960ce3bd83.jpg)
修改config/index.js里的assetsPublicPath的字段,初始项目是/,现在改为./
![](http://img.e-com-net.com/image/info10/dde7a1e82ae24fd8b71f0b3cdd9262ea.png)
![](http://img.e-com-net.com/image/info10/8faf1e13d3be4accb39cb139abffa0af.png)
需要修改dist下的index.html资源路径为./
打开dist底下的index.html文件,修改文件路径
![](http://img.e-com-net.com/image/info10/a670280c08af46968875b94dbddcd5d1.jpg)
通过浏览器打开,可以访问
![](http://img.e-com-net.com/image/info10/01eaa60a98044a8a9f009cf3e8497029.jpg)
3:项目打包处理完成,打开服务器连接工具,连接到自己的服务器
将dist文件扔到服务器,最简单粗暴的方式,根据index.html路径访问即可。(当然后面还要继续利用nginx搭建静态资源服务器)
![](http://img.e-com-net.com/image/info10/f98454d957ae45708c82c180a4339739.jpg)
好了,打开自己的域名+项目index.html路径就可以访问啦,这个时候,我们的静态资源vue项目部署到服务器上了。