声明: 代码源于 黄毅老师在慕课网上的教学视频,我自己重现了vue2.0版本,喜欢的童鞋可以去支持老师的课程:http://coding.imooc.com/class/74.html
演示地址:http://vuejssellapp.t.imooc.io/#!/
##依赖工具: - vue-cli - express - vue-resource - vue-router - vue-infinite-scroll - stylus - webpack
##安装: 1、安装node:http://nodejs.cn/download/ git:https://git-scm.com/downloads
2、从我的仓库复制代码:
$ git clone https://github.com/RegToss/Vue-SPA.git
3、安装vue脚手架工具vue-cli:
$npm install vue-cli -g
4、进入代码根目录安装依赖:
$ npm install --save-dev
5、运行命令:
$ npm run dev
6、发布代码:
$ npm run build
发布完代码后会生成dist目录,保存着项目的所有可运行的代码。
注意不能直接打开index.html运行,需要开启http server运行代码。 直接运行我写好的配置文件就可以运行代码:
$ node prod.server.js
打开浏览器输入localhost:9000看效果。
也可以在本地服务器部署你的代码,以nginx为例:
下载地址:http://nginx.org/en/download.html
解压nginx到指定目录:f:/nginx。 在命令行进入f:/nginx目录下运行:
$ start nginx
开启nginx。
1、默认配置的端口号是80,打开浏览器输入:localhost:80,如果出现welcome to nginx则端口80可以使用。否则需要修改默认端口号。
打开nginx/conf下的nginx.conf配置文件,查看默认监听端口号并修改为:
server {
listen 8088;
}
在浏览器输入localhost:8088即可正常访问。
2、修改默认路径为指定的地址,即可打开我们的页面,将server中的location修改为:
location / { root F:/Vue/vue-app/dist; //你的dist地址 index index.html; }
刷新浏览器即可访问vueapp内容。
(完)