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