安装依赖包
使用webpack编译vue文件，支持es6语法，至少需要的依赖包为：
vue
vue-loader
vue-template-compiler
webpack
babel-loader babel-core babel-preset-2015 babel-preset-stage-2
css-loader
编写webpack配置文件
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const resole = (dir)=> path.resolve(__dirname, '../' + dir)
module.exports = {
//配置文件入口
entry:{
app:'./src/main.js'
},
//配置输出目录
output:{
path:resole('dist'),
filename:'[name].[hash].js'
},
//配置编译需要的加载器
module:{
rules:[
{
test: /\.vue$/,
use:[
{loader:'vue-loader'}
]
},
{
test:/\.js$/,
exclude: /node_modules/,
use:[{loader:'babel-loader'}]
}
]
},
//配置可省略的后缀
resolve:{
extensions:['.js','.json','.css','.vue'],
alias:{
'vue$':'vue/dist/vue.esm.js'
}
},
//配置webpack插件
plugins:[
//热加载插件
new webpack.HotModuleReplacementPlugin(),
//自动注入
new HtmlWebpackPlugin({
filename:'index.html',
template:'index.html',
inject:true
})
]
}
配置快捷启动、编译脚本
通过package.json文件script进行脚本配置
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"clean": "rm -rf dist",
"build": "npm run clean && webpack --config build/webpack.config.js",
"start": "node app.js"
},
安装配置express服务
const express = require('express')
const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackHotMiddleware = require('webpack-hot-middleware')
const app = new express()
//配置中间件
app.use(express.static('dist'))
//配置webpack中间件
const webpackConfig = require('./build/webpack.config')
webpackConfig.entry.app = ['webpack-hot-middleware/client', webpackConfig.entry.app]
const compiler = webpack(webpackConfig)
app.use(webpackDevMiddleware(compiler,{
publicPath: "/"
}))
app.use(webpackHotMiddleware(compiler))
app.listen(9001, ()=>{
console.log('list at http://localhost:9001')
})
配置webpack-dev-middleware、webpack-hot-middleware中间件，支持热加载
//配置webpack中间件
const webpackConfig = require('./build/webpack.config')
webpackConfig.entry.app = ['webpack-hot-middleware/client', webpackConfig.entry.app]
const compiler = webpack(webpackConfig)
app.use(webpackDevMiddleware(compiler,{
publicPath: "/"
}))
app.use(webpackHotMiddleware(compiler))
启动项目
npm run dev
通过完成以上的配置，接着就可以在入口文件中使用vue创建项目了
