Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。
将vue项目部署到node服务器上:
一、准备工作
1、先去官网注册账号注册登录之后,看到这个界面:
2、可以看大支持的语言还是很多的 ,我们选择Node.js,跳转到这个界面:
3、下载工具:我们点击I'm ready to start按钮,跳转到这样一个界面,要求我们下载一个Heroku 的CLI 工具,如果你是部署到其他平台,一般也会让你下载一个对应的工具,用于后期的代码提交,这里按照提示下载安装就行了。
4、远程登陆:安装好了之后,打开一个命令行,根据页面上的提示登陆heroku,命令:heroku login,然后输入heroku的账号和密码。登陆成功会有相关的提示语。
然后点击页面下方的 I have installed the Heroku CLI,然后会跳到这个页面:
cone代码:按照页面提示,先进入到一个你要存放代码的文件夹,然后把他的代码克隆下来:git clone https://github.com/heroku/node-js-getting-started.git.
clone完了之后,我们可以看到这个文件夹下多了一个node-js-getting-started文件,进入这个文件夹:cd node-js-getting-started;
二、创建项目
然后点击页面上的I cloned the app source code按钮,然后会进入到一个创建项目教程的页面,按照他给的步骤来做一般是不会出什么问题的,大致走一下这个流程;
1、创建一个应用:heroku create;
上面紫色的那一串就是应用的名字,这个名字是随机生成的,你也可以指定一个名字:heroku create appName.把https://ancient-forest-54677.herokuapp.com/ 在浏览器打开[也可以使用命令heroku open打开],看到以下界面,表明这个应用已经创建好了:
2、然后我们把刚才生成代码push到服务器上去,使用命令:git push heroku master:
看到上面这个界面就表示已经push 完了,然后在命令行输入命令:heroku open,能看到现在界面变成了下面这样:
这表明我们刚才提交的代码已经部署到服务器上了,你看到的这个界面的代码,是生成项目的默认代码。
三、提交自己的代码
关于heroku 的其他一些命令,可以自己看文档,上面教程什么都比较齐全,这里就不再多说了,下来重点说一下怎么把自己的代码部署上去。
1、我们把node-js-getting-started这个文件夹放到sublime 里打开,先研究一下这个目录结构。
这个结构是很简单的了,public文件夹里应该放的是一些静态资源文件,文件夹里放的是页面文件,其他的都是一些配置项。
2、把我们自己的代码放进这个项目里。将之前的那个vue 项目先打包,生成一个dist文件,dist文件里一个index.html文件,这就是我们的视图文件,还有一个static文件,里面放的是就是静态资源文件。
删除views/pages/下的index.ejs文件,将dist文件里的 index.html文件放进pages文件夹里,并把后缀名改成.ejs,将static整个文件夹放进public文件夹里(这一步非常重要);
我们之前那个vue项目有一个写着后台接口的文件,就是server/router.js文件,我们为了区分,在node-js-getting-started文件夹下新建一个routers文件夹,然后将router.js文件放进去;
然后我们在index.js文件里将这个路由引入使用,代码如下:var router = require("./routers/router");
app.use(router);
注:这个代码要写在生成app之后,启动服务器之前。
3、然后我们将代码push到服务器
在node-js-getting-started目录下打开git 命令行工具,然后依次输入以下三个命令:gir add .
git commit -m '这里是你自己添加的提交的信息'
git push heroku master
输入完这个命令后,会看到一个上传进度,直到看到下面这个界面,就表示上传完成了。