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

兴趣是最好的老师！我希望通过学习和实践，第一个目标是用express和vue以及mysql搭建一个网站，并且有自己的一些增删改查的功能。感谢MEZ的博客指导。

一、使用express搭建一个web应用的骨架。

1、安装node.js

npm install node 

2、安装express

npm install express -g （-g是指全局安装）

3、创建一个express1的应用文件夹（也可以用webstorm直接创建一个project，那个更简单，对自动配置一些）

express express1

4、进入express1文件夹，安装所有依赖（webstorm会自动安装）

cd express1

npm install

5、window系统下启动这个应用

set debug=express1 & npm start

然后在浏览器中打开 http://localhost：3000 刷新后就可以看到这个应用了。

感觉超级简单！

二、使用前端框架vue

在之前创建的express1的目录下，使用vue-cli创建一个新项目。

1、全局安装vue-cli

npm install vue-cli -g

2、创建一个基于webpack模板的新项目

vue init webpack dev-www

3、进入dev-www文件夹并安装依赖

cd dev-www

npm install

4、启动项目

npm run dev

现在打开http://locaohost:8080.就能看到vue启动了。

三、将express和vue联系起来

express默认使用的是源于Node.js的HTML模板引擎jade（用webstorm的时候可以选择ejs或者jade，我选择了ejs），而vue打包的文件是html，因此要安装ejs作为引擎模板。（ejs的语法跟html很类似，jade需要额外学习）

1、进入express1目录，并安装ejs

cd express1

express --ejs （express --help会有命令行的介绍）

2、然后在app.js将view engine 修改为EJS

app.set('views', path.join(__dirname, 'views'));

app.engine('.html', require('ejs').__express);

app.set('view engine', 'html');

3、vue的配置修改是将dev-www下的config里的index.js修改

找到bulid和path字段，修改为：

//将入口文件index.html打包在express1目录下的views目录中

index： path.resolve(__dirname, '../../views/index.html'),

//path 将静态资源打包在express1根目录下的public中

assetsRoot: parh.resolve(__dirname, ' ../../public),

4、进入dev-www中，打包前端部分

cd dev-www

npm run build

5、现在进入express1，启动应用，应该就可以看到成果了

cd express1

npm start

页面刷新后，能够看到通过的结果很兴奋。。。