1. 第一步：创建目录文件夹
2. 第二步：下载依赖包package.json
$ npm install （这里的依赖包是常用的一些webpack依赖包,其中有些在此工程中没用上，可以删除）
{ "name": "webpackTOOvue", "version": "1.0.0", "description": "", "main": "webpack.config.js", "scripts": { "dev": "webpack-dev-server --inline --hot --open --port 5008" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^6.4.1", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.7.0", "babel-preset-es2015": "^6.24.1", "css-loader": "^1.0.0", "file-loader": "^0.11.1", "html-webpack-plugin": "^2.30.1", "less": "^2.7.2", "less-loader": "^4.1.0", "node-sass": "^4.5.2", "sass-loader": "^6.0.3", "style-loader": "^0.23.0", "url-loader": "^0.5.8", "vue-loader": "^11.3.4", "vue-template-compiler": "^2.2.6", "webpack": "^1.14.0", "webpack-dev-server": "^1.16.0" }, "dependencies": { "vue": "^2.2.6", "vue-router": "^2.3.1" } }
3. 第三步：配置webpack.config.js文件
var htmlwp=require('html-webpack-plugin'); module.exports={ entry : './src/02-main.js' , // 这是entry文件 output : { path: __dirname+'/dist', //__dirname当前文件夹的绝对路径 filename:'build.js' }, module:{ loaders:[ { test:/\.css$/, //所有.css结尾的文件都被loader处理 loader:'style-loader!css-loader' //从右边依次向左 }, { test:/\.scss$/, //所有.css结尾的文件都被loader处理 loader:'style-loader!css-loader!sass-loader' //从右边依次向左 }, { test:/\.less$/, //所有.css结尾的文件都被loader处理 loader:'style-loader!css-loader!less-loader' //从右边依次向左 }, { test:/\.(png|jpg|gif)$/, //所有.css结尾的文件都被loader处理 loader:'url-loader?limit=40000' //小于40K用64base打包到build.js }, { test : /\.js$/, loader : 'babel-loader', exclude : /node_modules/ }, { test : /\.vue$/, loader : 'vue-loader' } ] }, babel:{ presets : ['es2015'], plugins : ['transform-runtime'] }, plugins:[ new htmlwp({ title:'首页', filename:'index.html', //这是plugins的一个缓存文件，不用自己创建，修改，写上就可以了 template:'index2.html' //这是template模板文件 }) ] }
4. 第四步：创建template模板文件
//文件名为index2.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index2</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> /*移动端的视口，不是移动端可以不写*/ </head> <body> <div id="app"> /*这里一定要写一个id,将对应主js文件的连接*/ </div> </body> </html>
5. 第五步：创建主vue文件
/*文件名为:App.vue*/ <template> <span class="red">{{msg}}</span> </template> <script> export default{ /*负责导出.vue这个组件对象*/ data(){ return{ msg:'hell vf' } }, methods:{ }, created(){ } } </script> <style scoped> /* scoped 表示本样式只在本页有效 */ .red{ color: red; } </style>
6. 第六步：创建主js文件
//文件名：02-main.js import Vue from 'vue';//导入vue核心包 import App from './App.vue';//导入App.vue的vue对象 new Vue({ el:'#app', //render:function(create){create()} //es5写法 render:c=>c(App) //es6写法 });
7. 第七步：运行vue项目
$ npm run dev （这里不用再$webpack ,直接运行该命令，webpack插件包html-webpack-plugin会自动带入编译好的dist文件下的js文件，形成<script>脚本插入index2.html文件中）
8. 相关运行报错，或调试问题
若App.vue中的内容未渲染到index2.html页面中
可能的问题：
- 主js文件 --> 02-main.js 中 import Vue from 'vue'; new Vue({ }); 标记处不一样
- webpack.config.js文件 --> 没有导入 var htmlwp=require('html-webpack-plugin');
- webpack.config.js文件 -->
plugins:[ //忘记写s new htmlwp({ title:'首页', filename:'index.html', //这是plugins的一个缓存文件，不用自己创建，修改，写上就可以了 template:'index2.html' //这是template模板文件 //模板文件名对不上 }) ]
。。