使用express+vue搭建一個web應(yīng)用

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)用查看成果吧。

待補充...

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容