使用express+vue搭建一个web应用

author: ubbcou

email: [email protected]

如果看到哪里不对的，方便的话请告知~~~

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

待补充...