建立express项目
首先通过如下命令创建一个express的ejs模板项目(PS:ejs 是一套简单的模板语言,帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条;也没有再造一套迭代和控制流语法;有的只是普通的 JavaScript 代码而已。)
express ewv_test -e
再进入其目录,安装依赖
cd ewv_test
npm install
这样就建立了一个express项目,我们通过以下指令启动后访问3000端口查看
npm start
express项目结构:
安装模块
可以使用npm install 【模块名】安装,这样会安装相应模块的最新版本,也可以将模块名及版本写入package.json后通过npm install安装自己指定版本的模块,附上package.json
{
"name": "ewv",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.0.0",
"body-parser": "~1.17.1",
"cookie-parser": "~1.4.3",
"css-loader": "^0.28.4",
"debug": "~2.6.3",
"ejs": "~2.5.6",
"express": "~4.15.2",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.28.0",
"morgan": "~1.8.1",
"serve-favicon": "~2.4.2",
"style-loader": "^0.18.2",
"vue": "^2.3.4",
"vue-template-compiler": "^2.3.4",
"webpack": "^2.6.1"
}
}
配置项目
在express项目目录里新建src目录,里面写我们的前端代码,目录结构如图
在routes目录下index.js配置路由
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('../views/index.html', { title: 'Express' });
});
module.exports = router;
webpack配置(在express项目目录里新建webpack.config.js文件)
webpack官网简介:webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
webpack.config.js:webpack的配置文件是一个node.js的module,没有固定的命名,也没有固定的路径要求,如果你直接用webpack
来执行编译,那么webpack默认读取的将是当前目录下的webpack.config.js
webpack配置项:
- 入口文件:entry参数
entry:{ main:'./src/js/main.js', }
- 出口文件:output参数
output:{ filename:'javascripts/[name]-bundle.js', //这里没有使用 path模块来构建目录的路径有需要的可以单独修改 path:__dirname+'/public', //publicPath非常重要它可以放置页面的依赖关系在生成之后出现路径问题 publicPath:'http://localhost:3000' }, //webpack把vuejs的名称指向修改出问题需要它来修改 resolve: { alias: { 'vue': 'vue/dist/vue.js' } }
- 各种loader:module参数
module:{ rules:[ { //css加载器 test:/\.css$/, loader:'style-loader!css-loader' }, { test:/\.js/, loader:'babel-loader' }, { //html加载器(html-webpack-plugin默认以ejs加载页面防止报错我们需要html加载器) test:/\.html$/, loader:'html-loader' } ] }
- 添加额外功能:plugins参数
plugins:[ new htmlWebpackPlugin({ //这个是生成的html文件名,我们把它直接放在views中覆盖原有的欢迎页面 filename:'../views/index.html', //这个是根据哪个页面模版来打包文件 template:'./src/tpl/index.html', //chunks代表当前页面需要引入上述哪个依赖文件,我们直接将两个都引入 chunks:['main'] }) ]
webpack.config.js代码:
//这里引入了html-webpack-plugin模块来构建动态的html页面
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
//js入口文件
entry:{
main:'./src/js/main.js',
},
//打包输出的js文件位置[name]会按照模块的名称自动生成两个js文件
output:{
filename:'javascripts/[name]-bundle.js',
//这里没有使用 path模块来构建目录的路径有需要的可以单独修改
path:__dirname+'/public',
//publicPath非常重要它可以放置页面的依赖关系在生成之后出现路径问题
publicPath:'http://localhost:3000'
},
//webpack把vuejs的名称指向修改出问题需要它来修改
resolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
},
//loader加载器
module:{
rules:[
{ //css加载器
test:/\.css$/,
loader:'style-loader!css-loader'
},
{
test:/\.js/,
loader:'babel-loader'
},
{ //html加载器(html-webpack-plugin默认以ejs加载页面防止报错我们需要html加载器)
test:/\.html$/,
loader:'html-loader'
}
]
},
//html页面扩展
plugins:[
new htmlWebpackPlugin({
//这个是生成的html文件名,我们把它直接放在views中覆盖原有的欢迎页面
filename:'../views/index.html',
//这个是根据哪个页面模版来打包文件
template:'./src/tpl/index.html',
//chunks代表当前页面需要引入上述哪个依赖文件,我们直接将两个都引入
chunks:['main']
})
]
}
引入vue.js
现在我们可以直接在前端部分引用vue框架了,我在main.js里引用vue.js
import Vue from 'vue';
new Vue({
el:'#app',
data:{
title:'hello vue'
}
})
在index.html使用vue模板语法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><%=title%></title>
</head>
<body>
<div id="app">
{{title}}
</div>
</body>
</html>
启动项目,localhost:3000