author: ubbcou
email: ubbcou@outlook.com
如果看到哪里不對的,方便的話請告知~~~
使用 web 應(yīng)用開發(fā)框架express
使用應(yīng)用生成器工具 express 快速創(chuàng)建一個應(yīng)用的骨架。
通過如下命令安裝
npm install express -g
下面創(chuàng)建一個命名myapp的應(yīng)用。
express myapp
然后安裝所有依賴:
cd myapp
npm install
啟動這個應(yīng)用(MacOS 或 Linux 平臺):
$ DEBUG=myapp npm start
Windows 平臺使用如下命令:
set DEBUG=myapp & npm start
然后在瀏覽器中打開 http://localhost:3000/ 網(wǎng)址就可以看到這個應(yīng)用了。
如果對項目進行了修改,需要重新啟動應(yīng)用,修改位置才會生效嚄~~~
使用前端框架 vue
在之前使用 express 工具創(chuàng)建的 myapp 的更目錄下,使用命令行工具快速搭建單頁應(yīng)用:
# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創(chuàng)建一個基于 webpack 模板的新項目
$ vue init webpack dev-www
# 安裝依賴
$ cd dev-www
$ npm install
$ npm run dev
將 express 和 vue 聯(lián)系起來
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');
此時模板引擎已經(jīng)修改為 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'),
// 這里是將靜態(tài)資源打包在 myapp 根目錄下的public中
assetsRoot: path.resolve(__dirname, '../../public'),
然后,試試將在 dev-www 目錄下將前端部分打包:
npm run build
最后執(zhí)行啟動整個 express 應(yīng)用查看成果吧。
待補充...