兴趣是最好的老师！我希望通过学习和实践，第一个目标是用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
页面刷新后，能够看到通过的结果很兴奋。。。
网友评论