刚刚开始学习vue,由于经常在两台电脑切换,第一台电脑上是跟着学习视频搭建的,第二台电脑上自己独立搭建遇到些“小问题”,记录此文以备不时之需,也希望能够帮到初学者们
- 安装node (略)
- 安装vue
- npm install vue –save-dev
- 安装webpack
- npm install webpack –save-dev
- webpack配置(见下方webpack-dev-serve)
- 安装webpack-dev-server
- npm install web-dev-server –save-dev
- 配置文件webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin'); var webpack=require("webpack"); module.exports = { entry: { "index":[__dirname+'/src/jssrc/index.js',,'webpack-dev-server/client?http://127.0.0.1:8080'] }, output: { publicPath: "http://127.0.0.1:8080/", path: __dirname+'/src/webapp/js', //输出文件夹 filename:'[name].js' //最终打包生成的文件名(just 文件名,不带路径的哦) }, /*devServer:{ historyApiFallback:true, hot:true, inline:true, progress:true, port:9090 //端口你可以自定义 },*/ resolve: { alias: { vue: 'vue/dist/vue.js' } }, externals: { }, module:{ loaders:[ {test:/\.js$/,loader:"babel",query:{compact:true}}, {test:/\.vue$/,loader:"babel!vue", exclude: "/node_modules/"} ] }, plugins:[ new HtmlWebpackPlugin({ // filename: __dirname+'/src/webapp/index.html',//目标文件 filename:"index.html",//使用webpack-dev-server时配置 template: __dirname+'/src/html/index.html',//模板文件 inject:'body', hash:true, chunks:["index"] }) ] }
- 安装html-webpack-plugin
- npm install html-webpack-plugin –save-dev
- 安装babel
- npm install babel-cli babel-loader babel-preset-es2015 –save-dev
- babel 配置 .babelrc
javascript
{
"presets": ["es2015"] //解析规则为es2015
}
- 可能会用到的两个步骤
- npm install vue-loader –save-dev
- npm install vue-template-compiler –save-dev
- package.json中配置script
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "webpackRun": "webpack", "webpackServer": "webpack-dev-server --inline --hot --content-base ./src/webapp" --config ./webpack.config.js }