express+webpack+vue.js实战

建立express项目


首先通过如下命令创建一个express的ejs模板项目(PS:ejs 是一套简单的模板语言,帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条;也没有再造一套迭代和控制流语法;有的只是普通的 JavaScript 代码而已。)

express ewv_test -e

再进入其目录,安装依赖

cd ewv_test
npm install

这样就建立了一个express项目,我们通过以下指令启动后访问3000端口查看

npm start

express+webpack+vue.js实战_第1张图片

 

express项目结构:

express+webpack+vue.js实战_第2张图片

安装模块


可以使用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目录,里面写我们的前端代码,目录结构如图

express+webpack+vue.js实战_第3张图片

 在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模板语法



	
		
		<%=title%>
	
	
		
{{title}}

启动项目,localhost:3000

express+webpack+vue.js实战_第4张图片

 

 

 

你可能感兴趣的:(前端框架,服务器端)