author: ubbcou
email: ubbcou@outlook.com
如果看到哪里不对的,方便的话请告知~~~
使用 web 应用开发框架express
使用应用生成器工具 express 快速创建一个应用的骨架。
通过如下命令安装
npm install express -g
下面创建一个命名myapp
的应用。
express myapp
然后安装所有依赖:
cd myapp
npm install
启动这个应用(MacOS 或 Linux 平台):
$ DEBUG=myapp npm start
Windows 平台使用如下命令:
set DEBUG=myapp & npm start
然后在浏览器中打开 http://localhost:3000/ 网址就可以看到这个应用了。
如果对项目进行了修改,需要重新启动应用,修改位置才会生效嚄~~~
使用前端框架 vue
在之前使用 express
工具创建的 myapp
的更目录下,使用命令行工具快速搭建单页应用:
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack dev-www
# 安装依赖
$ cd dev-www
$ npm install
$ npm run dev
将 express 和 vue 联系起来
express
使用的是源于 Node.js 的 HTML 模板引擎,而我们 vue 打包成的文件是 html,因此在这里将 Jade
改为 ejs
。
首先在 myapp
项目根目录下安装 ejs
:
npm install ejs --save-dev
然后在 app.js 将 view engine 修改为 ejs。
app.set('views',path.join(__dirname , 'views') );
app.engine('.html', require('ejs').__express);
app.set('view engine', 'html');
此时模板引擎已经修改为 ejs,那么原来express生成的 .jade 文件也就不能直接识别了,如果需要留着,需要在引入它的时候加上.jade 后缀。如app.js中:
res.render('error'); -> res.render('error.jade');
对 vue 的配置修改则是其打包路径配置/dev-www/config/index.js
的修改。
找到这个文件的build,修改如下:
// 这里是将入口文件 index.html 打包在 myapp 根目录下的 views 目录中
index: path.resolve(__dirname, '../../views/index.html'),
// 这里是将静态资源打包在 myapp 根目录下的public中
assetsRoot: path.resolve(__dirname, '../../public'),
然后,试试将在 dev-www 目录下将前端部分打包:
npm run build
最后执行启动整个 express 应用查看成果吧。
待补充...